搭建react native环境基本上是参考了一下两篇文章:
第一次按照react native中文网环境搭建跑起来了,结果红屏,隔了几天没搞,结果再跑跑不起来了
接着参考第一个链接的大牛文章才知道,估计是react native命令行工具没安装好,而且git也没配置环境变量
所以在系统变量里面path里加入git安装路径...\bin,新建react native工程目录,我的是E:\react_native_workspace
然后cmd进入E盘react native工程目录react_native_workspace里面输入
git clone https://github.com/facebook/react-native.git等待安装完就行啦。安装完成后在react_native_workspace
里面会看到一个新生成的文件夹react-native。接着cmd进入这个文件夹后输入命令npm install -g等待最终安装完成(参考第一篇文章)。
安装完成后就可以使用react-native命令进行新建项目,启动服务器,启动项目一系列操作。
这个命令行工具安装一次就行了,以后新建react native项目只需要按照下面步骤走就好啦。
1、cmd进入react native工程目录,我的是E:\react_native_workspace,然后输入命令react-native init HelloWorldApp新建HelloWorldApp工程。命令跑完后在E:\react_native_workspace里面会出现一个新的文件夹HelloWorldApp,这样工程建好了。
2、开启本地服务器
cmd进入刚建立好的HelloWorldApp目录里面,执行命令react-native start,等待一会,在浏览器里面打开
http://localhost:8081/index.android.bundle?platform=android,如果可以加载出来的话就说明本地服务起来了。
3、修改js运行HelloWorldApp工程
用编辑器打开HelloWorldApp文件夹里面的index.android.js文件,删掉里面的所有内容,将下面代码复制进去
import React,{ Component } from 'react'; import { AppRegistry,Text } from 'react-native'; class HelloWorldApp extends Component { render() { return ( <Text>Hello world!</Text> ); } } // 注意,这里用引号括起来的'HelloWorldApp'必须和你init创建的项目名一致 AppRegistry.registerComponent('HelloWorldApp',() => HelloWorldApp);
保存好代码,新打开一个cmd窗口,还是进入 HelloWorldApp目录里面,输入运行命令react-native run-android等待app部署,一定要有一个模拟器或者一个真机连接电脑,有且只有一个,不要同时连几个机器。如果顺利的话就会部署成功,每次新建项目都重复这三个步骤即可。红屏的问题参考文章1,但是按照文章1那样修改完后要重新运行react-native run-android命令才可以。然后我们可以尝试修改js代码,然后双击键盘R,就可以重新加载app了。按ctrl+M调出模拟器(我的是Genymotion)上面的菜单,点击hot reloading支持一下。