React-Native初体验一(window环境下开发)

在看这篇文章之前先要确保你window下的react-native的环境已经搭建好了。如果还没有搭建好的请转看:史上最详细Windows版本搭建安装React Native环境配置
创建项目之前请确保已配好React-Native的开发环境:
1.安装Jdk
2.安装Android SDK
3.设置Android SDK
4.安装node
5.安装git
6.安装react-native命令行工具react-native-cli
1.创建RN项目(ReactNativeTest)
打开cmd,进入你希望创建项目的目录,输入react-native init ReactNativeTest,等待一段时间(较慢)

React-Native初体验一(window环境下开发)_第1张图片

创建完成的效果:

React-Native初体验一(window环境下开发)_第2张图片

2.ReactNativeTest目录结构
React-Native初体验一(window环境下开发)_第3张图片

3.运行package(运行服务)
1.打开cmd,进入ReactNativeTest项目的目录。
React-Native初体验一(window环境下开发)_第4张图片

2.输入react-native start,等待一段时间
React-Native初体验一(window环境下开发)_第5张图片

3.服务启动成功的效果(注意这个窗口不要关闭):
React-Native初体验一(window环境下开发)_第6张图片

4.检测服务是否可用
这时候可以用浏览器访问 http://localhost:8081/index.android.bundle?platform=android,如果可以访问表示服务器端已经可以了(下图是服务启动成功并且可以访问)。
React-Native初体验一(window环境下开发)_第7张图片

4.开始模拟器
1.启动模拟器:
React-Native初体验一(window环境下开发)_第8张图片

2.检测模拟器是否在线:
打开新的一个cmd窗口(不要关闭之前的那个),执行adb devices
React-Native初体验一(window环境下开发)_第9张图片

5.运行ReactNativeTest项目
1.打开新的cmd命令行,进入ReactNativeTest项目的目录,执行:react-native run-android (这步需要下载依赖,构建比较久,耐心等待)
React-Native初体验一(window环境下开发)_第10张图片

2.运行成功后如下图
React-Native初体验一(window环境下开发)_第11张图片

3.模拟器运行的效果:
React-Native初体验一(window环境下开发)_第12张图片

来源:http://bbs.520it.com/forum.php?mod=viewthread&tid=2215&highlight=React

你可能感兴趣的:(React-Native初体验一(window环境下开发))