注意事项

  1. 创建 RN APP 有两种方式, 一种使用npm install create-react-native-app -g安装 create-react-native-app 命令行工具来初始化你的应用。特点是:这种方式官方说是不需要安装 Xcode 或者 Android Studio,也不需要配置任何工具来构建代码,只要在手机安装Expo 客户端,借用第三方客户端开发,发布应用的时候也是将应用托管到 Expo 上。缺点是:如果你想在模拟器上看效果还是得装 Xcode,发布的时候只是在 Expo 上发布,用户想要使用你的 APP 必须先安装 Expo 才能使用。另外一种是使用npm install -g react-native-cli安装,这种方式特点是:开发完成可以直接发布到市场/APP STORE 不需要借助第三方客户端,缺点是:配置麻烦,需要修改原生代码。
  2. 使用 Xcode 打包应用到 iphone 手机上看效果的时候,想要打离线包:教程,如果遇到__dev__变量为true的情况,参考这个链接解决。
  3. 制作适配所有机型尺寸的 Icon: 链接链接
  4. 修改启动画面:找到项目根目录下的LaunchScreen.xib用 Xcode 打开,即可修改。
  5. 应用内导航解决方案: react-navigation(官方指定推荐)、react-native-navigation,两个都有各自的亮点,同时也有坑。
  6. 数据请求可以使用 Fetch,因为不是在web端,所有不会有跨域的问题。
  7. 本地存储 AsyncStorage.getItem/setItem是异步的,返回的是一个 promise 对象,与 web 的 localStorage 获取机制不一样。
  8. 简单的列表页面使用 Scrollview组件,复杂的数据列表使用 Listview / FlatList 组件。
  9. require 资源/文件,不支持变量的形式(require(fileName + '.png')),解决:if (...) { require(...) } else { require(...) } 或者以对象的形式引入。
  10. 动画使用 Animated 组件完成,性能最好,比 web 实现的方式好,链接
  11. TouchableHighlight 组件设置了 underlayColor 属性,需要加上 onPress 函数才会有效果。
  12. onPress 事件在view组件上无效,只能加在 Text、TouchableOpacity 、TouchableHighlight 等类似的组件上。
  13. 样式没有渐变属性,需要借助第三方库:react-native-linear-gradient
  14. 需要进行事件分发,可以使用 RN 自带的 DeviceEventEmitter 对象实现。
  15. Image 组件需要指定大小,否则不显示。
  16. 使用 Modal 组件可以覆盖原生视图,可以做弹出层/模态框等效果。
  17. 使用 componentDidCatch 捕获异常错误,RN里只能捕获render函数的异常,RN componentDidCatch componentDidCatch
  18. new URL(url) 方法无效报错,自己实现或使用第三方库。
  19. 虚拟键盘挡住 TextInput 组件解决:通用解决方案当 Modal 与 KeyboardAvoidingView 使用时
  20. TextInput 获得焦点时,模拟器不出现键盘,模拟器顶部菜单勾选 Hardware -> Keyboard -> Toggle Software keyboard。

2017-11 第三方库遇到的问题

react-navigation 遇到的问题有:

  1. 不支持头部隐藏动画,需要自己实现
  2. DrawerNavigator 没有抽屉柜的效果,比较生硬
  3. 当使用重置导航操作的时候会有动画发生,某些场景可能你不需要,但是没有去除动画的API,得自己换方式解决
  4. 头部的返回按钮图标不支持改颜色,需要自己重写

react-native-navigation 遇到的问题有:

  1. 不支持初始化路由(也可能是文档里没找到)
  2. tab icon 不支持组件形式,仅支持图片,如果要使用第三方的icon组件需要在初始化应用的时候自己写一个icon loader,加载后把图片取出来再初始化。