React Native 踩坑小结

react-native link 来做什么

比如我引入了 react-native-cookie 这个第三方库

Android

Gradle 是一个 Java 系语言的自动化构建工具,使用 groovy 特定语言声明项目的配置

文件变动

/android/app/build.gradle

dependencies {
    compile project(':react-native-cookies')
}

/android/settings.gradle

include ':react-native-cookies'
project(':react-native-cookies').projectDir = new File(rootProject.projectDir, '../node_modules/react-native-cookies/android')

IOS

使用 CocoaPods 这个依赖管理器

官方指南

说到这里 react-native link 其实就是起同时改动 iosandroid 的依赖配置作用


一些细节记录一下

页面适配

部分页面其实也是要获取到设备高度来定位的,以及 Platform 可以解决安卓和 IOS 之间部分微妙的差别

用 Context API 实现中英文切换

有一点就是 react-navigationtabbarHeaderTitle 也要实现中英文切换,其实也不难。根据文档来看,tabbarHeaderTitle 都是可以用自定义组件去替换默认 config 的。有了自定义组件,那就是 React Elements 了,共享 Context 也就没问题了。

图片保存

本来以为很简单,然后折腾了一天,首先官方文档给的东西很少很少,然后去 issue 里搜让我去 StackOverflow 上去搜…细节贴在下面好啦:(

IOS端

要用一下 react-native-fs 这个库,还要将 node_modules 的 RN 模块下的 Camera 包的 xcode 文件拖到项目文件里

MainBundlePath 就是 ios 端下储存的文件的地方

CameraRoll.saveToCameraRoll(
  `${RNFS.MainBundlePath}/assets/app/assets/qrcode.png`,
  'photo'
).then(() => {
  Alert.alert(language ? 'Save to album successfully' : '保存到相册成功');
});
Android 端

Android 端就更麻烦了…先要获取权限,然后你以为 DocumentDirectoryPath 就是安卓端下面的存储路径,你错了

先要获取到安卓侧的权限,然后还要借助 RNFS 的 downLoadFile

this.requestExternalStoragePermission().then(res => {
  if (res === 'granted') {
    const storeLocation = `${RNFS.DocumentDirectoryPath}`;
    const pathName = `${new Date().getTime()}文件名.png`;
    const downloadDest = `${storeLocation}/${pathName}`;
    const ret = RNFS.downloadFile({
      fromUrl: 'https://static.airbob.org/app/qrcode.png',
      toFile: downloadDest
    });
    ret.promise.then(res1 => {
      if (res1 && res1.statusCode === 200) {
        const promise = CameraRoll.saveToCameraRoll(
          `file://${downloadDest}`
        );
        promise.then(() => {
          Alert.alert(
            language ? 'Save to album successfully' : '保存到相册成功'
          );
        });
      }
    });
  }
});

Debug

React-Native-Debugger

React-Native-Debugger

可以看到请求和响应的报文,利于调试。

Toggle Inspector

也可以看到 Dom 的一些属性(一开始我甚至以为 RN 没这个功能)

Android 的真机调试

开发选项里可以开启“显示布局边界”,有的很迷的布局问题可以用这个来缩小 debug 边界。

比如,我遇到过一个问题,就是 TextInputplaceholdervalue 在模拟器以及 expo 上都正常,到了真机就是显示不出来。后来开了这个选项,最终给 TextInput 加了一个高度解决。

甚至这边还去提了个 issue 提问作者