windows下react-native安装

发表于   |   分类于

写在开头此贴为本人记录贴，参考《史上最详细Windows版本搭建安装React Native环境配置》并盗了不少图(懒癌晚期)。嗯，好了，开始记录。

准备

  1. 安装Java
  2. 安装Android SDK
  3. 安装node
  4. 安装git

    安装

    这里不介绍如何java,sdk的安装，未安装自行google或baidu，注意配置环境变量。至于node，git的，参考另外一篇《Hexo+GithubPage搭建博客》。

安装react-native

  1. 使用git clone命令从github克隆react-native至本地：

    1
    git clone https:github.com/facebook/react-native.git

  2. 进入react-native目录下的react-native-cli目录，输入：

    1
    npm install -g

react-native-structs
安装完成，可以在命令行下使用react-native来创建了。

创建react-native项目

指定到目录下执行以下命令，创建神奇的AwesomeProject：

1
react-native init AwesomeProject

由于被墙的原因，会比较慢，耐心等待（ps:本人等了very long）
react_create_success

运行package

进到刚创建的AwesomeProject，执行react-native start：

1
2
cd AwesomeProject
react-native start

react_start
此时可以通过浏览器访问 http://localhost:8081/index.android.bundle?platform=android，出现如下页面表示服务端已经可以了
react_start_page

运行项目

cmd运行

另外再启动一个新的命令行,到你的项目下，执行(设备允许usb调试)：

1
react-native run-android

运行成功的界面
react_run_success
运行失败的话，根据命令行提示的错误信息修正，这里说下本人遇到的错：

  1. 环境变量没有配置成功:ANDROID_HOME,JAVA_HOME
  2. 对应的sdk没有下载，比如：react-native指定build_tools为23.0.1，导致编译失败，下载相应的版本即可，或者更改相应目录下的配置文件。

手机配置

  1. 首次运行手机上会显示如下界面：
    start_error
  2. 莫慌，这样表示你已经运行成功了，不过这里还需设置下链接ip。摇一摇手机，你会看到：
    shake_setting
  3. 点击Dev Settings,你将看到：
    dev_setting
  4. 点击Debug server host & port for device,输入你电脑的ip:port组合(不知道电脑ip，使用ipconfig查看)，react端口号固定为8081
    setting_ip
  5. 再摇一次，点击Reload JS，当当当，Welcome to React Native!
    react_success