初识React Native 入门配置篇

jopen 4年前

这篇博文记录了我第一次接触React Native的心酸历程,在此记录下来,以便以后查阅,也希望给别的朋友一些帮助。

废话不多说,不知道React Native是什么东西的朋友,请自行google,下面开始正文。

由于我使用的是Mac 所以这里只针对 OS X系统。

要使用React Native 我们需要安装以下工具:

1,homebrew

安装方法:

ruby -e "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/master/install)"

在终端执行以上命令,等待安装完成。

2,安装node

在终端执行:brew install node (注意,这里安装的node 只适合React Native开发,并不包含node.js的Web开发功能)

3,第二步完成后 我们需要安装watchman

在终端执行:brew install watchman

以上步骤均完成以后 下面我们就要开始配置IOS和Android的开发环境了,由于我是Android开发 所以系统已经配置了ANDROID_HOME环境变量,还需要安装Android sdk,都配置完成以后 就可以执行下面的操作

安装 react-native-cli,由于我们要从npm官网下载文件 所以需要安全上网法,或者是将npm的仓库源替换为国内镜像

执行

npm config set registry https://registry.npm.taobao.org

npm config set disturl https://npm.taobao.org/dist

然后再执行npm install -g react-native-cli 进行安装,完成以后 我们就可以初始化第一个HelloWorld程序了

执行命令:react-native init HelloWord

这里时间会比较长,你懂得。等待完成以后 在/Users/x你的用户名/  目录下会有一个HelloWorld文件夹打开以后如下图

这就是我们的项目文件了,其中index.android.js是Android平台的程序入口文件index.ios.js当然就是ios平台的入口文件了。

接下来就是要将项目跑起来了,我是用的真机,将手机连接电脑usb,开启手机的开发者模式,然后进入到HelloWorld这个目录,执行react-native run-android命令,第一次运行可能会提示找不到Android sdk 目录,根据提示 在HelloWorld/android 目录中新建一个文件 名称为local.properties 的文件,在里面写上 sdk.dir=/xxx/xxx/sdk(这后面是你的sdk目录),我第一次运行是这样解决的,然后我把项目删除再新建项目后运行就好了,不清楚是为什么。

第二个问题就是权限不足,这个问题 比较简单 执行sudo chmod -R 777 /xxx 你的项目目录

然后再次部署项目到设备 基本成功,但是在手机上运行出来是一片空白,什么都没有显示,心里又是一顿抓狂,最后找到原因,是由于项目安装到手机后没有给显示悬浮窗的权限,在手机设置里给添加上这个权限就OK了,再次运行,屏幕一片红,下方出现了“Reload JS”的按钮, 显示异常 ReferenceError:Can't find variable:_fbBatchedBridge,看到这个不要惊慌,使劲摇晃手机 在出来的菜单里选择“Dev Settings”,然后点击最下面的“Debug server host & port for device“,然后填入你电脑的ip:8081必须是你的手机和你的电脑在同一个局域网内才可以。设置完成以后再重启应用 你就可以看到Reac Native的欢迎界面了,就是index.android.js页面的内容。

好了,这里给大家推荐一下http://reactnative.cn/  

这里有很多关于React Native 的技术资料 大家可以多多学习。


来自: http://my.oschina.net/u/2272722/blog/603407