React Native 问题

() React Native 环境相关问题

安装 Homebrew 失败，可以使用中科大镜像来安装
执行 /usr/bin/ruby -e “$(curl -fsSL https://cdn.jsdelivr.net/gh/ineo6/homebrew-install/install)”

解决方案参考：https://www.jianshu.com/p/e3a177413265

切换 cocoapods 为清华大学镜像

解决方案参考：https://mirror.tuna.tsinghua.edu.cn/help/CocoaPods

() 编译与运行问题

React Native Could not expand ZIP

其余错误也可以采用下面的解决方案

解决方案：清理一下

cd android 
gradlew clean 
cd ..
react-native run-android 

或者

cd android && gradlew clean && cd .. && react-native run-android

() IOS指定模拟器运行

react-native run-ios --simulator "iPhone X"

() React-Native执行react-native run-ios 无法自启动模拟器

// 列出所有的iPhone Simulator，每个设备都有唯一的id
xcrun simctl list devices

// 设置默认Simulator
xcrun simctl boot 610E0E19-F6A6-40E2-A16B-38A35F7F8B18

// 打开Simulator
open `xcode-select -p`/Applications/Simulator.app

// 测试是否自动打开Simulator
react-native run-ios

() WebStorm设置React Native智能提示

ReactNative-LiveTemplate插件地址：https://github.com/virtoolswebplayer/ReactNative-LiveTemplate

Mac下安装
提示： 如果没有templets文件夹，你可以手动创建一个

将ReactNative-LiveTemplate目录下的ReactNative.xml复制到~/Library/Preferences/WebStorm***/templates，然后重启WebStrom

例如：~/Library/Preferences/WebStorm2018.3/templates

使用方法

通用方法
直接输入组件或Api名称的首字母, 比如想要View,只要输入V自动提示代码里就会看到View

StyleSheet属性提示
首先 按下command + J, 然后输入属性名的首字母

如: 输入f,会自动提示 fontSize,fontFamily,fontStyle…等等

() react-native-scrollable-tab-view和ScrollView冲突

IOS是正常的，但是在Android上react-native-scrollable-tab-view需要设置高度，不然无法正常显示

() render()中调用this.setState()会导致死循环

() Android的Text只能嵌套Text，不能嵌套任何View，不然会报错，但是IOS可以嵌套任何View

() React Native嵌入WebView来展示网页内容。在网页中，有 input 标签的输入框，通过点击输入框，弹出系统软键盘进行输入。但是无论是Android 虚拟机还是实体机上，都无法第一时间弹出软键盘。

通过操作应用，反而发现将应用前后台进行切换一下，再切入前台展示WebView，此时的软键盘就能够正常弹出。

解决方案参考：http://www.voidcn.com/article/p-zprjndmf-bqd.html

() React Native嵌入WebView 组件不支持Android上传图片文件问题

问题原因：
原因是 H5 访问本地文件的时候，使用的 < input type=‘file’>,WebView 出于安全性的考虑，限制了以上操作。

解决方法：
重写 WebviewChromeClient 中的 openFileChooser() 和 onShowFileChooser()方法响应< input type=‘file’>，然后使用原生代码来实现调用本地相册和拍照的功能，最后在 onActiivtyResult 把选择的图片 URI 回传给 WebviewChromeClient。

解决方案参考：https://www.lenore412.com/2018/08/10/ReactNativeWebview

() React Native Module数据多次回调不管是使用Promises和Callback都会报错，

错误信息：
Illegal callback invocation from native module. This callback type only permits a single invocation from native code.

原因：因为React Native为了节省内存，当调用Promises或者Callback一次之后，React Native就立即释放掉了，所以他仅仅只能调用一次。 但是我们有其他需求的时候，比如蓝牙扫描，做过蓝牙方面应用的应该都知道，当用户扫描设备时，并不是一次性的将周围蓝牙设备返回，因此这个时候我们就需要多次回调数据。

解决方案：Native Module出现多次数据回调时，我们可以使用RCTEventEmitter来注册事件,然后通知到JavaScript。

解决方案参考：https://www.jianshu.com/p/4245b4844a49

() Fetch库有时不会发出网络请求

As far as the underlying bug, definitely feels like the eventloop "falls asleep" when processing response.blob and readBlobAsText, instead of recognizing there are still a Promise on the eventloop to process and return data back to the callers.

解决方案：用 Axios (http://www.axios-js.com) 替代 Fetch 做网络请求。

() Mac OS拷贝到IOS模拟器

1.将要Mac上的内容拷贝到Mac粘贴板上(可以使用Commond + C，或者鼠标右键，点击复制)

2.将窗口切换到iOS模拟器，然后使用Mac上键盘点击：commond + V(这一步操作是将Mac剪贴板上的内容拷贝到iOS模拟器的剪贴板上)，然后在iOS模拟器上使用菜单选项(在输入框中，长按就会出来一个黑色的菜单条，如下图所示)中的粘贴(Paste)进行粘贴

()IOS模拟器拷贝到Mac OS

1.在iOS模拟器中，使用菜单选项拷贝内容(不能使用Commond + C)，然后使用Mac上键盘点击：Commond + C(这一步操作是将iOS模拟器剪贴板上的内容拷贝到Mac OS的剪贴板上)

2.将窗口切换到非iOS模拟器窗口，就可以直接按照正常的粘贴方式(Commond + V，或者鼠标右键，点击粘贴)，将iOS模拟器上拷贝的内容粘贴到Mac OS上了。