React Native开发(一)

最近开始研究ReactNative开发项目,看着官方文档来搭建环境,也遇到一些问题,这里进行整理
首先这是WIN环境下的搭建,使用MAC的小伙伴参考就行了

必要的软件

Chocolatey(win环境下的包管理器)
cmd后直接运行

@powershell -NoProfile -ExecutionPolicy Bypass -Command “iex ((new-object net.webclient).DownloadString(‘https://chocolatey.org/install.ps1‘))” && SET PATH=%PATH%;%ALLUSERSPROFILE%\chocolatey\bin

默认在C:\Users\用户名\AppData\Local\Temp 目录,并且自动配置好了环境变量

Python 2

choco install python2

Node

choco install nodejs.install

node 安装成功后 其他的插件可以使用npm 安装

npm config set registry https://registry.npm.taobao.org –global
npm config set disturl https://npm.taobao.org/dist –global

React Native命令行工具（react-native-cli）
React Native的命令行工具用于执行创建、初始化、更新项目、运行打包服务（packager）等任务。

npm install -g react-native-cli

Android Studio
本来就是android开发,这个就不写了,注意as的版本要在2.0以上

运行项目

以上的软件安装完毕后可以尝试建个项目了

react-native init MyProject

默认在C:\Users\用户名 目录创建MyProject项目,项目的结构

连上手机或模拟器
adb devices 确定已连接

进入项目目录执行

react-native run-android

一般Packager 会自动开启,如果没有就手动开启

react-native start

• 注意:执行android程序的时候会自动下载gradle-2.4-all 如果不想等待太久时间就修改\MyProject\android\gradle\wrapper 目录的gradle-wrapper.properties文件
  将其中的distributionUrl 配置为你已经下载好的gradle 版本
  同样build.gradle 里面的classpath 的版本也配置好,之后再运行react-native run-android

执行完这个命令后应该有如下展示效果

这个时候在手机上应该会出现红屏错误,先不管
长按Menu键,在弹出来的悬浮窗选择Dev Settings -> Debug server host & port to device 输入电脑的ip + :8081

然后在浏览器访问 http://localhost:8081/debugger-ui
手机返回悬浮窗 选择Reload
最后浏览器上提示应该如下

同时手机上也能正常显示 Welcome to React Native!

当修改了index.android.js 文件后,手机直接选择Reload 即可刷新,不需要重新安装

这里有几个可能遇到的问题,menu键按了没反应,系统 -> 应用管理 -> MyProject -> 开启悬浮窗权限
浏览器无法连接上, 看看是否开了代理,关闭代理即可

开发工具
官方推荐了几个开发工具
WebStorm
Sublime
VS Code
nuclide

这里使用sublime开发

Package Control
插件管理工具
View->Show Console菜单打开命令行

import urllib.request,os,hashlib; h = ‘2915d1851351e5ee549c20394736b442’ + ‘8bc59f460fa1548d1514676163dafc88’; pf = ‘Package Control.sublime-package’; ipp = sublime.installed_packages_path(); urllib.request.install_opener( urllib.request.build_opener( urllib.request.ProxyHandler()) ); by = urllib.request.urlopen( ‘http://packagecontrol.io/’ + pf.replace(’ ‘, ‘%20’)).read(); dh = hashlib.sha256(by).hexdigest(); print(‘Error validating download (got %s instead of %s), please try manual install’ % (dh, h)) if dh != h else open(os.path.join( ipp, pf), ‘wb’ ).write(by)

自动下载,如果无法下载
参考:http://www.cnblogs.com/luoshupeng/archive/2013/09/09/3310777.html

下载完毕后
“Preferences”–>”Package Control” 输入install Package
选择要下载的插件
ReactJS : 支持React开发，代码提示，高亮显示
Emmet ：前端开发必备。
Terminal : 在sublime中打开终端并定位到当前目录，神器，mac下的快捷键为：command+shift+T
react-native-snippets：react native 的代码片段

其他的插件可以参考这里：http://segmentfault.com/a/1190000003698071