@jameszuo 2015-10-27T14:21:16.000000Z 字数 5961 阅读 467

web 前端开发手机 app 之 react-native 一套打完降龙十七掌

讲座/分享

“ 官网并没有写 windows 下的环境搭建流程，整理这一套招式着实花费了在下不少精力，看完别走，记得好评 ”

“ 我只打一遍，能学会多少，就看你们的造化了，看完别走，记得好评 ”

什么是 react-native

“ 这年头哪个做 web 开发的不知道啥是 react-native ？”

“ 不知道的同学请参考在下另一篇 React 概念秘籍 Facebook React 原理与实践 ”
环境搭建
- 安装 nodejs 最新版
  - 如果在办公网，记得设置代理
```
$ npm config set proxy=http://proxy.tencent.com:8080

$ npm config delete registry
```
  - 在 PATH 环境变量中增加 c:\Users\\AppData\Roaming\npm;
- 安装 git
  - 让 git 使用 https:// 协议代替 git:// 协议（公司代理不支持 git:// 协议）
```
$ git config --global url."https://".insteadof git://
```
- Java SDK（需手动安装）
  - 下载JDK 并安装
  - 设置环境变量 JAVA_HOME
```
c:\path\of\jdk1.8.xx
```
  - 在 PATH 环境变量中添加
```
;%JAVA_HOME%\bin\;
```
  - 设置 java 的网络代理
    - 打开控制面板，搜索 java 并打开，在 常规 -> 网络设置 中设置使用代理服务器 proxy.tencent.com:8080
  - 记得重新打开命令窗口
- 配置 android 开发环境
  1. 下载 Android SDK Tools （SDK Tools Only 版本即可）并安装
  2. 打开 Android SDK Manager
  3. 配置使用公司镜像
    - Tools > Manage Add-on Sites > User Defined Sites > New
```
http://android-mirror.bugly.qq.com:8080/android/repository/addon.xml
```
    - Tools > Option > Http Proxy Server
```
server: android-mirror.bugly.qq.com
port: 8080
```
    - Packages > Reload 刷新列表
  4. 选中下列包
```
1. Tools / Android SDK Tools 24.3.4
3. Tools / Android SDK Platform-tools 23.0.1
2. Tools / Android SDK Build-tools 23.0.1
3. Android 6.0 (api 23) / SDK Platform
4. #Extras / Android Support Repository
```
    点击 Install x Packages 开始安装
  5. 安装完成后设置环境变量 ANDROID_HOME 指向 Android SDK 的安装路径，如
```
d:\android\android-sdk
```
  6. 在 PATH 环境变量中添加 ;%ANDROID_HOME%\tools;%ANDROID_HOME%\platform-tools\;%ANDROID_HOME%\build-tools\23.0.1\; ### 注意这里的版本号
- 模拟器
  
  android 官方模拟器性能并不好，而且配置略繁琐，建议使用 Genymotion 代替
  1. 下载 Genymotion (132.62 mb with VirtualBox) 并安装
  2. 注册 Genymotion 帐号
  3. 添加设备
    1. Add
      使用前面注册的帐号和密码进行登录
      
      选择中意的 Android 版本和手机型号，点击 Next 安装
      
      目前建议安装4.x版本，5.x版本无法运行在不支持 Intel虚拟化技术的CPU上
    2. 安装完成后点击 Start 启动
      - 如果启动失败，点击右侧的扳手图标，改为 1 个 CPU 内核试试
  - react-native-cli 命令行工具
    1. 安装
```
$ npm install -g react-native-cli
```
      网速慢时建议手动安装
```
$ git clone https://github.com/facebook/react-native.git

$ cd react-native\react-native-cli

$ npm install -g
```
    2. 测试
```
$ react-native -v
```
      npm.oa.com 上的 react-native 包有问题，不建议用
- 开发工具
  1. 下载 WebStorm 并安装 —— 用于编写 js 代码
    - 下载 react-native源码
    - 设置 javascript 语言类型为 jsx
    - 设置 Javascript -> Libraries
      - 勾选 Node.js Globals 使 WebStorm 能够正确理解 require('..')
      - 添加 react-native 源码到 Libraries 中
  2. 下载 IntelliJ Idea 并安装 —— 用于编写 java 代码
    - 启动
    - 在启动界面点击 configuration -> project structure
    - SDKs -> 添加 Java SDK 和 Android SDK
    - Project -> 选择添加的 Android SDK
    - 配置完先放着，待会用
- 脚手架
  - 运行 $ react-native init <项目名称> 创建一个 react-native 工程，里面包含了 iOS 和 android 的子目录
  - 执行：
```
react-native init ShowMeTheMoney
```
  - 项目目录结构：
    
    里面已经包含了我们需要用到的 iOS、android 以及 js 代码，其中 ios 和 android 目录的结构不建议修改，但 js 你爱怎么玩怎么玩
  - 这里有一个坑，执行完 react-native init xxx 以后，xxx/node_modules/react-native 已经安装上了，但是并没有生成 xxx/ios 和 xxx/android 两个目录，除非设置 npm config set logleve=debug 才可以生成
  - 运行
    - 启动 Genymotion 虚拟设备（我用的是 Google Nexus 7 - 4.4.4）
    - 修改 package.json（windows 下面并没有 shell）
    - 在 工程目录 下启动调试用的 JS Server
```
$ npm start
```
    - 另开命令窗口执行下面的命令，该命令会自动查找当前操作系统系统上已启动的虚拟设备和已连接的安卓设备，然后安装和运行 app
```
$ react-native run-android 
```
      第一次执行这个命令会自动下载 java 的 gradle 组件
    - 如果运行正常，则会出现下面的界面
    - 错误情况
      - 没有可用的虚拟设备或物理设备
        
        com.android.builder.testing.api.DeviceException: no connected devices!
        
        启动设备即可
      - 存在多个虚拟设备或物理设备
        
        error: more than one device and emulator
        
        确保只开启了一个设备
      - 没有卸载旧的包
        
        Failure [INSTALL_FAILED_UPDATE_INCOMPATIBLE]
        
        一般出现在打 release 包时，react-native 发现设备上存在同名但签名不同的包，会提示冲突
        执行 adb uninstall com.<项目名称> 卸载旧的包即可
      - 没有签名
        
        Failure [INSTALL_PARSE_FAILED_NO_CERTIFICATES]
        
        对 apk 进行签名即可
- 代码编写
  
  准备工作到这里就就绪了，是不是很辛苦？要知道，为了吃这口螃蟹，我也是操(cào)碎了心……
  1. 一个带按需渲染的滚动列表
```
class Main extends React.Component {
    constructor(props) {
        super(props);
        var ds = new ListView.DataSource({
            // 只渲染数据变化的行,返回true表示需要重新渲染行
            rowHasChanged: (r1, r2)=> r1 !== r2
        });
        this.state = {
            ds: ds.cloneWithRows(new Array(1000).join(' ').split(' ').map((x, i)=>i))
        };
    }
    _renderRow(rowData) {
        return (
            <View style={styles.item}>
                <Text style={styles.itemText}>{rowData}</Text>
            </View>
        );
    }
    render() {
        return (
            <ListView
                dataSource={this.state.ds}
                renderRow={this._renderRow.bind(this)}
                pageSize={20}
                onEndReachedThreshold={500}
                />
        );
    }
}
var styles = StyleSheet.create({
    item: {
        height: 60,
        borderBottomWidth: 1,
        borderBottomColor: '#ccc',
        justifyContent: 'center'
    },
    itemText: {
        textAlign: 'center'
    }
});
```
    - 改动后进入模拟器点击菜单键，点击 reload js 即可。如果改动了 java 代码，则需要重新执行 react-native run-android
  2. StyleSheet
```
// 声明
var styles = StyleSheet.create({
  container: {
    borderRadius: 4, // 不支持 border: 1px solid '#d6d7da'
    borderWidth: 0.5, // 单位都是像素
    borderColor: '#d6d7da',
  },
  title: {
    fontSize: 19,
    fontWeight: 'bold',
  },
  activeTitle: {
    color: 'red',
  },
});
// 使用
<View style={styles.container}>
  {/*这里使用了样式覆盖，底层是 Object.assign()*/}
  <Text style={[styles.title, this.props.isActive && styles.activeTitle]} />
</View>
```
  3. native通信
  4. ES6
- 调试
  1. 用 Chrome 访问 http://localhost:8081/debugger-ui 打开调试器
  2. 按照提示安装 React Developer Tools 插件
  3. 刷新 debugger-ui 并按 f12 打开 chrome dev tools
  4. 在 Sources 中找到你的 index.android.js，设置断点试试吧
```
如果中午吃饭回来再调试的时候发现连不上调试器，那么试试关掉调试器重开
```
  5. 你可以在 Dev settings 里勾选 Auto reaload on js change
  6. 要在手机上调试，如果你是单身妹子，我们组有好几个优秀的单身贵族，请提供联系方式给我，如果你汉子，请用力摇晃手机来显示该菜单
  7. 抓包
    - 在 Fiddler 中添加 host，如：
    - 在 app 的 Dev settings 中点击 Debug server host for device，填写
      
      jameszuo.local
    - 还没完，还要在 android 设置 中开启 Wi-Fi 代理
      1. 在 cmd 执行命令 ipconfig 找到
        
        以太网适配器 Virtualbox Host-Only Network:
        ...
        ipv4 地址 . . . . . : 192.168.164.1 <--- 复制这个
        ...
      2. 长按 Wi-Fi WiredSSID，点击 Modify network
        
        填入VirtualBox的虚拟网卡IP，然后你就可以在 Fiddler 里抓包了
    - 需要注意的是 Debug server host for device 和 WiredSSID 要么同时设置，要么都不设置
- LogCat
  - 如果你的 IDEA 设置正确，那么能够在它的左下角找到
- 打包
- 在工程目录下进行下列操作
  1. 创建 android\app\src\main\assets 目录（如果不存在）
  2. 下载 http://localhost:8081/index.android.bundle?platform=android&dev=false&minify=true 到 android/app/src/main/assets 目录中
  3. 打包 apk 文件
```
$ cd android

$ .\gradlew assembleRelease

$ del /q android\app\src\main\assets\*

$ cd ..
```
    - 执行该命令会在 android\app\build\outputs\apk\ 目录下生成 app-release-unsigned.apk 文件
  4. 生成签名文件
    
    只执行一次即可，生成以后每次打包可略过这一步
```
$ keytool -genkey -v -keystore <keystore文件路径> -alias <唯一别名> -keyalg RSA -validity 10000
```
    例如
```
$ keytool -genkey -v -keystore .\android\tencent_vas_mqqgame.keystore -alias ShowMeTheMoney -keyalg RSA -validity 10000
```
  5. 对该 apk 文件进行签名参考 Android Docs
```
$ jarsigner 
    -keystore <keystore文件路径> 
    -signedjar <未签名的apk文件路径> <签名后的apk文件路径>
    <唯一别名>
```
    例如：
```
$ jarsigner -keystore android/tencent_vas_mqqgame.keystore -signedjar android\app\build\outputs\apk\app-release-signed.apk android\app\build\outputs\apk\app-release-unsigned.apk ShowMeTheMoney
```
    如出现 “警告未提供 -tsa 或 -tsacert,” 可以忽略
  6. 对已签名的 apk 进行优化参考 Android Docs
```
```
    $ zipalign [-f] [-v] <alignment> infile.apk outfile.apk 
```
```
    例如：
```
$ zipalign -f -v 4 android\app\build\outputs\apk\app-release-signed.apk android\app\build\outputs\apk\app-release.apk
```
  7. 这时，你的 android\app\build\outputs\apk\ 目录下应该有这几个文件
```
app-release.apk
app-release-signed.apk
app-release-unsigned.apk
```
  8. 其中 app-release.apk 就是要发布的文件，测试安装一下
```
adb uninstall com.ShowMeTheMoney && adb install android\app\build\outputs\apk\app-release.apk
```
- 发布
  
  TO BE CONTINUED...
- “ 记得好评 ”