您的位置：首页 > Web前端 > React

Facebook React Native 配置小结

2015-10-04 16:00 483 查看
2015年9月15号，ReactNativeforAndroid发布。至此，React基本完成了对多端的支持。基于React/ReactNative可以：

H5,Android,iOS多端代码复用

实时热部署

目前使用ReactNative开发只能在Mac系统上进行。所以配置都是基于Macos.

环境配置

首先需要安装的有:

Homebrew(brew):

Homebrew是Mac中的一个安装包管理器。没有安装的话，点击这里安装我的版本如下:

bogon:~weichunsheng$brew-v Homebrew0.9.5(gitrevision8017;lastcommit2015-10-03) bogon:~weichunsheng$

　　版本过低将会导致无法安装后续几个组件。可用
brewupdate
升级。

Node.js和npm

Node.js需要
4.0
及其以上版本。安装好之后，npm也有了。

通过nvm安装Node.js

nvm是Node.js的版本管理器，可以轻松安装各个版本的Node.js版本。

安装nvm可以通过Homebrew安装:

brewinstallnvm


或者按照这里的方法安装。

然后安装Node.js：

nvminstallnode&&nvmaliasdefaultnode

也可以直接下载安装Node.js：https://nodejs.org/en/download/

安装watchman和flow


这两个包分别是监控文件变化和类型检查的。安装如下：



brewinstallwatchman
brewinstallflow

安装React-Native
通过npm安装即可：

npminstall-greact-native-cli

APP开发环境的设置
iOS

XCode6.3及其以上即可。

Android

这个比较麻烦。

设置环境变量：
ANDROID_HOME


exportANDROID_HOME=/usr/local/opt/android-sdk

SDKManager安装以下包：

AndroidSDKBuild-toolsversion23.0.1

Android6.0(API23)

AndroidSupportRepository

配置完毕。


初始化第一个helloworld项目
文档提到：

react-nativeinitx项目名称


等待一段时间之后（具体视网络情况而定）时间比较长，项目初始化完成。

进入到项目目录：

cd项目名称
运行：ls-l
total24
drwxr-xr-x14srainstaff476Sep2109:52android
-rw-r--r--1srainstaff1023Sep2111:47index.android.js
-rw-r--r--1srainstaff1065Sep2011:58index.ios.js
drwxr-xr-x6srainstaff204Sep2011:58ios
drwxr-xr-x5srainstaff170Sep2110:31node_modules
-rw-r--r--1srainstaff209Sep2011:58package.json


其中
android
和
ios
中分别为两个平台的项目文件。
index.android.js
和
index.ios.js
为两个页面对应的js文件。

运行项目
不管是iOS还是Android，在开发调试阶段，都需要在Mac上启动一个HTTP服务，称为`DebugServer`，默认运行在8081端口，APP通DebugServer加载js。iOS和Android的模拟器，连接Mac本机的服务都很方便。但是通过USB或者Wifi连接调试，就稍微麻烦一些了。

IOS

还是非常简单，XCode打开项目，点击运行就好。修改
index.ios.js
,在模拟器中
⌘+R
重新载入js即可看到相应的变化。

iOS真机调试也简单，修改HTTP地址即可。

jsCodeLocation=[NSURLURLWithString:@"http://localhost:8081/index.ios.bundle"];


　　

Android

按照官方文档，需要一个模拟器（Genymotion模拟器也可以）。但是不像iOS，Android开发平时更多是直接用真机进行开发和调试，如何运行部署到真机。

运行命令

react-nativerun-android

然后就会部署到模拟器，修改
index.android.js
，调出模拟器菜单键，选择重新载入js即可看到变化。

示例APP直接部署到真机，红色界面报错，无法连接到DebugServer。

如果是5.0或者以上机型，可通过adb反向代理端口，将Mac端口反向代理到测试机上。

adbreversetcp:8081tcp:8081

如果5.0以下机器，应用安装到测试机上之后，摇动设备，在弹出菜单中选择DevSetting>DebugServerhostfordevice，然后填入Mac的IP地址

在AndroidStudio中调试开发

在AndroidStudio打开项目，然后编译部署到真机。

这个时候，在命令行启动DebugServer即可：

react-nativestart



官方文档：https://facebook.github.io/react-native/docs/getting-started.html#content

参考：http://www.liaohuqiu.net/cn/posts/react-native-1/https://github.com/creationix/nvm#installationhttp://www.jianshu.com/p/cd2a8c5ee1c7http://wiki.jikexueyuan.com/project/react-native/NativeComponentsAndroid.htmlhttp://www.tuicool.com/articles/V3U3UbU



                                            

                                        

                        
                        内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息 
                    

                    

                    

                        

                         标签： 
                                                

                        

                    


                

            


            

                
相关文章推荐

                

                
            

        

        

            

            
            

                

                    
新的分享

                    

                        
                    

                

            


            

                

                    
章节导航