React Native IOS 开发笔记

记录遇到的问题以及如何解决。

问题

1. 创建 React Native 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，加载后把图片取出来再初始化。