一、环境搭建
1、Android-For-Windows环境搭建
①：下载Chocolatey包管理器(需要以管理员身份运行命令窗口)
建议使用翻墙工具进行下载
@powershell -NoProfile -ExecutionPolicy Bypass -Command"iex ((new-object net.webclient).DownloadString('https://chocolatey.org/install.ps1'))"&& SET PATH=%PATH%;%ALLUSERSPROFILE%\chocolatey\bin
②：在命令提示窗口使用Chocolatey安装Python 2
chocoinstallpython2
③：在命令提示窗口使用Chocolatey安装Node.js
chocoinstallnodejs.install
此步骤之后如果网速较慢可以使用npm镜像加速器来加速安装
npmconfig set registry https://registry.npm.taobao.org --global
npmconfig set disturl https://npm.taobao.org/dist --global
④：安装React-Native的命令行工具
用于执行创建、初始化、更新项目、运行打包服务（packager）等任务。
npminstall -g yarn react-native-cli
⑤：React-Native运行在Android环境下的条件
a)Jdk版本必须是1.8或以上版本，如不符合可以使用choco install jdk8进行安装
b)确定Android SDK及Android Device Emulator是否安装
c)在SDK Platforms窗口中，选择Show Package Details，然后在Android 6.0 (Marshmallow)中勾选Google APIs、Android SDK Platform 23、Intel x86 Atom System Image、Intel x86 Atom_64 System Image以及Google APIs Intel x86 Atom_64 System Image。
d)在SDK Tools窗口中，选择Show Package Details，然后在Android SDK Build Tools中勾选Android SDK Build-Tools 23.0.1。（必须是这个版本）
e)配置ANDROID_HOME环境变量（用户变量），指向Android SDK路径
⑥：React-Native运行在Android环境下的条件可选的安装项
a)安装Git(可以使用Chocolatey安装)
chocoinstallgit
b)Genymotion模拟器安装（可以使用Reload快速编译代码，建议安装）
⑦：环境配置完成，建立测试项目
React-native initHelloWord(会创建一个项目在当前路径，过程较慢)
cdHelloWorld(打开项目所在路径)
react-native run-android(运行项目，确保模拟器已打开或者已连接真机)
⑧：Android环境配置中常见错误
a)RN需要启动一个Dev server来辅助开发，Android 5.0可以直接通过USB的访问，5.0以下只能通过WiFi来访问。为了便于开发，还是建议实用5.0的机器
b)因为React Native提示错误和开发菜单都是通过悬浮窗显示的,如果没有页面弹出，可以在软件权限中检查是否有 显示悬浮窗的权限
c)React packager如果打不开，可以在项目根目录下执行命令react-native start，在项目运行期间不能关闭React packager，否则需要react-native run-android才能重新运行
d)如果使用模拟器进行项目测试，需要检查platform-tools是否在环境变量中配置
1、iOS 10-For-Mac环境搭建
①：Homebrew, Mac系统的包管理器，用于安装NodeJS和一些其他必需的工具软件。
/usr/bin/ruby -e "$(curl -fsSLhttps://raw.githubusercontent.com/Homebrew/install/master/install)"
译注：在Max OS X 10.11（El Capitan)版本中，homebrew在安装软件时可能会碰到/usr/local目录不可写的权限问题。可以使用下面的命令修复：
sudo chown -R `whoami` /usr/local
②：使用Homebrew来安装Node.js.
brew installnode
此步骤之后如果网速较慢可以使用npm镜像加速器来加速安装
npmconfig set registry https://registry.npm.taobao.org --global
npmconfig set disturl https://npm.taobao.org/dist --global
③：安装React-Native的命令行工具
用于执行创建、初始化、更新项目、运行打包服务（packager）等任务。
npminstall -g yarn react-native-cli
如果你看到EACCES: permission denied的权限报错，请修复/usr/local目录的所有权：
sudo chown -R `whoami` /usr/local
④React-Native运行在iOS环境下的条件
a)React Native目前需要Xcode7.0或更高版本。你可以通过App Store或是到Apple开发者官网上下载。这一步骤会同时安装Xcode IDE和Xcode的命令行工具。
虽然一般来说命令行工具都是默认安装了，但你最好还是启动Xcode，并在Xcode | Preferences | Locations菜单中检查一下是否装有某个版本的Command Line Tools。Xcode的命令行工具中也包含一些必须的工具，比如git等。
⑤：环境配置完成，建立测试项目
React-native initHelloWord(会创建一个项目在当前路径，过程较慢)
cdHelloWorld(打开项目所在路径)
react-native run-iOS(运行项目，确保模拟器已打开或者已连接真机)
二、目录结构
①：android文件夹,这里是android工程的源代码，我们可以使用android studio打开这个文件夹
②：ios文件夹，这里是iso的项目工程的源代码，可以用xcode打开+node_modules，是react-native工程用到的模块
③：index.android.js是android的 页面的内容，主源代码文件
④：index.ios.js是ios的 页面的内容，主源代码文件
⑤：package.json工程描述文件
注：实际开发中，可以参考以下目录结构
├── components //组成应用的各个组件
│├── Routers.android.js //每个组件若实现不一样，分为android的实现和ios的实现。
│├── Routers.ios.js
│├── common //公共组件
│├── issues //议题页面
│├── navigation //导航组件，android用侧边栏，ios准备用tab
│ └── project //项目页面
└── DataService.js
a)代码全部放在src目录下，这样操作比较方便，从逻辑上也比较清晰。
b)react的应用，是用自定义组件或原生组件层层嵌套而成的。因此我将整个应用划分为组件部分（组成各个页面）和一些其他服务（目前比较简单，只抽象出发get请求的网络服务）。
c)components内，根据自己的业务逻辑进行抽象，把整个应用划分为层层嵌套的组件，目录结构的组织形式基本就是我页面的组织形式。如果有一些比较通用的功能，可以提取成公共组件，放在common目录下。
d)每个组件如果ios和android的实现不太一样，则创建两个文件，如Routers.android.js和Routers.ios.js。
e)在index.android.js和index.ios.js中，AppRegistry是JS运行所有React Native应用的入口。应用的根组件应当通过AppRegistry.registerComponent方法注册自己，然后原生系统才可以加载应用的代码包并且在启动完成之后通过调用AppRegistry.runApplication来真正运行应用。
网友评论