ReactNativeDemo
学习ReactNative开发,搭建ReactNative第一个项目
React Native 开发笔记
1、安装Homebrew
$ /usr/bin/ruby -e "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/master/install)"
2、安装wget、git、curl工具
//每次执行brew命令时,最好先执行brew update 或者 brew upgrade 来保持上述几个程序为最新版本。
$ brew update
//接下来安装 wget 工具
$ brew install wget
//安装git指令执行的工具
$ brew install git
//安装curl工具
$ brew install curl
3、安装npm工具,这时会自动安装node.js,并自动设置环境变量
$ brew install npm
//安装telnet命令,Mac OS自带有,不需要安装
$ brew install telnet
Error: No available formula with the name "telnet"
//安装bower、gulp构建js工具
$ npm install gulp bower -g
$ npm install gulp -g
//安装好node.js,检查node.js和使用
$ node
> console.log("hello");
hello
> .exit
//安装watchman,调试js的工具
$ brew install watchman
//安装flow,调试js的工具
$ brew install flow
//查看brew下安装了工具列表
$ brew list
curl git openssl watchman
flow node pcre wget
4、快速开始
1、安装 React Native 组件
React Native 需要一些在 开始 React Native 中阐明的基本的安装。 在完成了这些依赖项的安装之后,这里有两条可以为一个 React Native 项目完全准备好的命令。
$ npm install -g react-native-cli
react-native-cli 是完成剩余安装的命令行工具。它是通过 npm 安装的。这将会在你的终端里面安装 react-native 这个命令行,你只需要做一次即可。
$ react-native init AwesomeProject
译注:由于众所周知的网络原因,react-native命令行从npm官方源拖代码时会遇上麻烦。请将npm仓库源替换为国内镜像:
npm config set registry https://registry.npm.taobao.org
npm config set disturl https://npm.taobao.org/dist
另,执行init时切记不要在前面加上sudo(否则新项目的目录所有者会变为root而不是当前用户,导致一系列权限问题,请使用chown修复)。
2、运行iOS应用
$ cd AwesomeProject
用XCode打开ios/AwesomeProject.xcodeproj并点击Run按钮。
使用你喜欢的文本编辑器打开index.ios.js并随便改上几行。
在iOS Emulator中按下?-R就可以刷新APP并看到你的最新修改!
3、运行Android应用
$ cd AwesomeProject
$ react-native run-android
使用你喜欢的文本编辑器打开index.android.js并随便改上几行
按Menu键(通常是F2,在Genymotion模拟器中是?+M)然后选择 Reload JS 就可以看到你的最新修改。
在终端下运行adb logcat *:S ReactNative:V ReactNativeJS:V可以看到你的应用的日志。
5、为已有的React Native工程添加Android支持
如果你已经有了一个只有iOS版本的React Native工程,并且希望添加Android支持,你需要在你的工程目录下运行以下命令:
打开package.json文件,在dependencies项中找到react-native,并将其后的版本号修改为最新版本。
$ npm install
$ react-native android
6、启动 watchman 服务
查看 watchman 服务启动结果
在浏览器运行:
http://localhost:8081/index.android.bundle?platform=android&dev=true&hot=false
看看结果是不是下面效果,是则服务启动成功。
7、运行结果
1、第一次运行手机肯定报错
2、这时候摇一摇手机,点击Dev Settings后,点击Debug server host & port for device,设置IP和端口
3、这里的IP是电脑的IP,不知道的可以在命令行中输入ipconfig进行查询,端口号固定8081
4、设置完成后,回到空白页面,再次摇一摇手机,选择Reload JS,程序就运行起来,出现Welcome to React Native!
5、第一次运行React Native 项目结束。