RN勇者之路 | XavierShi's Blog

披荆斩棘勇往直前

使用 expo 开发 RN

expo 安装

npm install expo-cli --global
expo init my-new-project
cd my-new-project
expo start

expo 使用

如果想要使用 expo 预览项目，那么首先要安装 android 和 ios 的 expo，这个在苹果商店和Android 下载下载安装。原本使用命令启动 expo 项目之后可以通过输入 i 和 a 来自动安装 expo 到模拟器当中，不过因为某些原因报错，现在即使尝试数遍也无法安装，所以必须手动安装 expo 到模拟器。

Android 由上面地址将 apk 下载然后拖入 Android 模拟器安装
iOS 掘金参考简书参考
1. 首先下载模拟器构建程序
2. mkdir Exponent-X.XX.X.app && tar xvf Exponent-X.XX.X.tar.gz -C Exponent-X.XX.X.app
3. xcrun simctl install booted [path to Exponent-X.XX.X.app]用具体路径替换包括[]在内的东西。
这样再使用expo start运行项目并输入 i、a 则会分别启动模拟器当中的 expo 来运行项目

组件

TabBarIOS 使用心得

TabBarIOS.Item 里面必须包含一个组件，如果不包含组件，那么使用 selected 或者设置 selected 的时候就会报错:react.children.only expected to receive a single react element child 期望接收单个 react 组件

react-native-tab-navigator

npm i react-native-tab-navigator -S。这个 tabbar 组件的好处是双平台效果基本一致，并且使用方式和 tabbarios 挺像。

导航组件可以选择react-native-navigation，也可以选择react-router，还有一个 react-navigation
经过查询发现现在使用较多的导航库是react-navigation。
使用react-navigation报错undefined is not an object (evaluating 'RNGestureHandlerModules.State')，yarn add react-navigationandyarn add react-native-gesture-handler _(:з ゝ ∠)_。文档里面有写在非 expo 环境下需要做如此操作，被其他事耽误一下就给忘了。

react-native-keychain And react-native-sensitive-info

数据存储，读取 Keychain(ios)。
react-native-sensitive-info这个提供了 Android 的 Shared Preferences 存储与 iOS 的 Keychain 存储。

ImagePicker

照相和选图片之前需要获取系统权限许可，expo 获取许可方式如下:

import { ImagePicker, Permissions } from "expo"

  async componentWillMount() {
     // CAMERA_ROLL为具体权限常量
    const { status } = await Permissions.askAsync(Permissions.CAMERA_ROLL)
    console.log(status)
    this.setState({ hasCameraPermission: status === "granted" })
  }

图标库

react-native-vector-icons
yarn add react-native-vector-icons
react-native link react-native-vector-icons,如果这个命令失败,看一下步骤:

添加字体文件（这一步千万不能忘记，不然就算运行成功你也看不到图标）

到项目中的 node_modules/react-native-vector-icons/Fonts，里面有很多已经内置的图标库字体文件，依照自己的需求，复制需要的字体文件到 /app/src/main/assets/fonts ( 如果没有这个目录就自行创建 ) 即可。

android/settings.gradle
include ':react-native-vector-icons'project(':react-native-vector-icons').projectDir = new File(rootProject.projectDir, '../node_modules/react-native-vector-icons/android')
build.gradle

dependencies {
   compile fileTree(dir: "libs", include: ["*.jar"])
   compile project(':react-native-vector-icons') //新添加的
   compile "com.android.support:appcompat-v7:23.0.1"
   compile "com.facebook.react:react-native:+"  // From node_modules
}

MainApplication.java

@Override
protected List<ReactPackage> getPackages() {
 return Arrays.<ReactPackage>asList(
        new MainReactPackage(),
        //新添加的
        new VectorIconsPackage()
        );
}

启动图控制

react-native-splash-screen
ape tools 一键生成各个平台的各种图标、启动图

参考资料

推送

极光推教程

UI 库

RN 未来展望

携程开源 RN 开发框架 CRN
京东：庖丁解牛！深入剖析 React Native 下一代架构重构