React Native 开发笔记

Posted 2020-06-27 BigBaHuang

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 项目结束。