这几天使用react native开发app,遇到一些坑,先记录下来,以后再继续补充

环境搭建


打开react native中文网,发现环境搭建特么也太复杂了,安装各种插件/软件,对于我们 编辑器+浏览器 就能搞事情  的前端开发人员来说,确实有些蛋疼,特别是有些包还需要科学上网,甚至科学上网也下不下的时候。

那么,可不可以不按照它指定的搭建方式去搭建,经过尝试,完全可以不用安装那么多东西。下面开始我的简单版环境搭建

安装java jdk  / android sdk /  配置环境变量 / 链接手机运行。

详细说明:

1/ 首先需要有node ,然后通过 npm install react-native-cli -g 全局安装 react-native

  找个文件夹 初始化一个项目  react-native init AwesomeProject 

2/ 安装java jdk,并配置环境变量 (参考这个帖子

3/ 安装android sdk

  由于科学上网的关系,国内好多安装方法都无法访问google,这里给大家提供一个简单的android  sdk包

  链接:http://pan.baidu.com/s/1hrWgZwK 密码:6m70

  下载解压后,配置环境变量(参考这个帖子

    在压缩包中双击sdk manager.exe,当然点一下可能不行,就多点几下,弹出窗口中选择最新的sdk tools   platform-tools build-tools 点击install(由于网络问题,需要多试几次)

  

  

4/ 然后链接手机,手机打开开发中调试,在电脑的项目文件夹打开命令行,运行 react-native run-android,就可以慢慢打包了,耐心等待,开始的时候下载gradle会特别慢,不要紧,耐心等待,或者去这里下载,https://services.gradle.org/distributions/ ,

运行到这里,在手机上就装好了。

注:如果到此步没有打包成功,提示缺乏licenses,则可以创建要给xxx.bat文件,贴入如下代码,然后点击运行以下,应该就可以了。

mkdir "%ANDROID_HOME%\licenses"
echo |set /p="8933bad161af4178b1185d1a37fbf41ea5269c55" > "%ANDROID_HOME%\licenses\android-sdk-license"

以后就真机调试就好啦,在menu菜单中选择 debug js remotely,就会自动在chrome浏览器打开控制台调试,很方便

菜单如下

一般在打开app的情况下摇一摇就出menu ,如果没有的话,就在电脑命令行输入 ,就会在手机端弹出菜单。

补充:在菜单中可以选上 live roload 和hot reloading ,这样当修改完成代码,就可以自动热更新了。(有时热更新不管用,就需要reload或者直接重新打包安装)

热更新需要配置 端口,在dev settings中选择debug server ,在弹窗中输入 电脑ip地址:8081,就Ok了。

完!

react native window下的环境搭建和调试方案的更多相关文章

  1. 【转】android 最新 NDK r8 在window下开发环境搭建 安装配置与使用 详细图文讲解,完整实际配置过程记录(原创)

    原文网址:http://www.cnblogs.com/zdz8207/archive/2012/11/27/android-ndk-install.html android 最新 NDK r8 在w ...

  2. android 最新 NDK r8 在window下开发环境搭建 安装配置与使用 详细图文讲解,完整实际配置过程记录(原创)

      android 最新 NDK r8 在window下开发环境搭建 安装配置与使用 详细图文讲解,完整实际配置过程记录(原创) 一直想搞NDK开发却一直给其他事情耽搁了,参考了些网上的资料今天终于把 ...

  3. Android NDK r8 Cygwin CDT 在window下开发环境搭建 安装配置与使用 具体图文解说

    版权声明:本博客全部文章均为原创.欢迎交流.欢迎转载:转载请勿篡改内容,而且注明出处,谢谢! https://blog.csdn.net/waldmer/article/details/3272500 ...

  4. React Native在window下的环境搭建(二):创建新项目

    React Native创建一个新项目: react-native init TestAndroidApp 提示:你可以使用--version参数(注意是两个杠)创建指定版本的项目.例如react-n ...

  5. React Native在window下的环境搭建(一)

    React Native官方开发文档 以下是本人抄录的: 初次接触React Native感觉和React很像,却是有点类似,但不完全是,React Native有自己的组件对象,不过它也自定义的组件 ...

  6. window下lamp环境搭建

    软件: apache_2.2.25.msi php-5.4.30-Win32-VC9-x86.zip mysql-5.6.11-win32.msi下载地址:http://download.csdn.n ...

  7. React Native从零到一搭建开发环境

    React Native从零到一搭建开发环境 ReactNative环境搭建 安装Homebrew 安装rvm 安装nvm 安装node 安装react-native-cli 安装watchman i ...

  8. React Native 简介:用 JavaScript 搭建 iOS 应用(2)

    [编者按]本篇文章的作者是 Joyce Echessa--渥合数位服务创办人,毕业于台湾大学,近年来专注于协助客户进行 App 软体以及网站开发.本篇文章中,作者介绍通过 React Native 框 ...

  9. React Native 简介:用 JavaScript 搭建 iOS 应用 (1)

    [编者按]本篇文章的作者是 Joyce Echessa--渥合数位服务创办人,毕业于台湾大学,近年来专注于协助客户进行 App 软体以及网站开发.本篇文章中,作者介绍通过 React Native 框 ...

随机推荐

  1. 深入浅出JDBC-操作时间与大对象(Clob/Blob)

    一.时间(Date.Time.Timestamp) java.sql.Date/java.sql.Time/java.sql.Timestamp extends java.util.Date publ ...

  2. SSE两个页面的相互通信

    两个页面之间互相通信 首先搭建express框架,然后通过two页面发送数据给服务器,服务器把数据传送给one页面 在two 中发送数据,在one中显示 router/index.js var axi ...

  3. How to put a relative path for a DLL statically loaded?

    How to put a relative path for a DLL statically loaded? I have a DLL made in Delphi 7/Windows XP tha ...

  4. 卸载oracle数据库

    Windows Registry Editor Version 5.00 [-HKEY_LOCAL_MACHINE\SYSTEM\CurrentControlSet\services\OracleOr ...

  5. Centos7安装配置tomcat 9并设置自动启动

    原文:https://blog.csdn.net/stinkstone/article/details/78082725 1.官网下载安装包 这里选择适合Linux的安装包,下载到本地后上传到cent ...

  6. Source Insight 源代码查看工具

    在开发的过程中,有时候我们需要研究源代码,查看源码是一个好的习惯,能帮我们学到很多的东西,比如JDK可以帮助我们理解很多设计模式在实际开发中的应用,又或者android开发者,源代码更是必不可少的,当 ...

  7. 网络驱动移植之解析Linux网络驱动的基本框架

    内核源码:linux-2.6.38.8.tar.bz2 概括而言,编写Linux网络驱动其实只要完成两件事即可,一是分配并初始化网络设备,二是注册网络设备. 1.分配并初始化网络设备 动态分配网络设备 ...

  8. LruCache DiskLruCache 缓存 简介 案例 MD

    Markdown版本笔记 我的GitHub首页 我的博客 我的微信 我的邮箱 MyAndroidBlogs baiqiantao baiqiantao bqt20094 baiqiantao@sina ...

  9. JavaScript中的单引号和双引号解决

    在使用JavaScript显示消息或者传递字符数据的时候,经常会碰到数据中夹杂单引号(')或者双引号("),这种语句往往会造成JavaScript报错.对此一般采用/'或者/"的解 ...

  10. MongoDB 复制一个collection里的数据到另一个collection

    mongodb shell 中执行: db.source(复制源表).find().forEach(function(x){ db.target(目的表).insert(x); })