前言:最近几个项目都用到了React Native 下面简单整理一下在开发中遇到的问题,可能还有很多问题没记录上来,欢迎交流学习....
Q: "CFBundleIdentifier", Does Not Exist
在终端执行:
react-native upgrade
如果还报错则将package.json 中的react 和react-native 版本更改一下:
react: '16.0.0-alpha.6'
react-native: '0.44.3'
删除node_modules文件夹:
rm -rf node_modules
再执行安装依赖包命令:
npm intall
Q: native module cannot be null, 如下截图:
第一步:需要手动将缺少的依赖库添加到项目中:
第二步:在build phases中添加Link Binary With Library
手动添加依赖库参考地址:https://facebook.github.io/react-native/docs/linking-libraries-ios.html#manual-linking
Q: warning: isMounted(...) is deprecated in plain Javascript react classes
可以通过在index.js添加如下代码去掉警告:
import { YellowBox } from 'react-native';
YellowBox.ignoreWarnings(['Warning: isMounted(...) is deprecated', 'Module RCTImageLoader']);
Q:如何去掉Android中TextInput 下划线?
由于Android的input 会自带下划线,所以在实际的需求中需要我们自己实现,
设置属性:underlineColorAndroid:'rgba(0,0,0,0)'
Q: android 打包运行闪退问题?
由于按照官方文档生成keystore 之后,以下命令:
keytool -genkey -v -keystore my-release-key.keystore -alias my-key-alias -keyalg RSA -keysize 2048 -validity 10000
打开项目下的Android 目录,编辑gradle.properties文件,添加如下代码
MYAPP_RELEASE_STORE_FILE=my-release-key.keystore MYAPP_RELEASE_KEY_ALIAS=my-key-alias MYAPP_RELEASE_STORE_PASSWORD=***** MYAPP_RELEASE_KEY_PASSWORD=*****
再配置Android 项目下app 目录的build.gradle,如下:
... android { ... defaultConfig { ... } signingConfigs { release { if (project.hasProperty('MYAPP_RELEASE_STORE_FILE')) { storeFile file(MYAPP_RELEASE_STORE_FILE) storePassword MYAPP_RELEASE_STORE_PASSWORD keyAlias MYAPP_RELEASE_KEY_ALIAS keyPassword MYAPP_RELEASE_KEY_PASSWORD } } } buildTypes { release { ... signingConfig signingConfigs.release } } }
然后通过Android studio 生成release apk
注:keystore文件不要上传到git上,可以在.gitingore 文件中添加忽略
结果生成出来的APP 在手机上直接闪退。
网上找了一下,发现还漏掉了一个步骤,需要将RN项目的资源打包进APP 中。
react-native bundle --entry-file index.js --bundle-output ./android/app/src/main/assets/index.android.bundle --platform android --assets-dest ./android/app/src/main/res/ --dev false
再次打包就可以正常运行了。
Q: ios 如何打包?
react-native bundle --entry-file index.js --platform ios --dev false --bundle-output ./ios/index.jsbundle --assets-dest ./ios/bundle
react-native bundle --entry-file index.ios.js --platform ios --dev false --bundle-output ./ios/index.jsbundle --assets-dest ./ios/bundle
Q:React native: Cannot add a child that doesn’t have a YogaNode or parent node
需要在render 函数加上()
Q:去掉键盘首字母大写及自动校正
autoCapitalize: "none", //不自动大写
autoCorrect: false,
Q: Android 端视图层级关系?
如果设置了elevation,则elevation 值越大则层级越高
Q: Android 端textinput多行,字体居上?
设置:textAlignVertical: 'top'
Q: 针对react-native-scrollable-tab-view 组件,底部线条初始化不显示问题。
measureTab() 方法中添加如下代码
if (page === this.props.activeTab){
this.state._leftTabUnderline.setValue(x);
this.state._widthTabUnderline.setValue(width);
}else if(this.props.activeTab === this.props.tabs.length-1){
this.state._leftTabUnderline.setValue(x);
this.state._widthTabUnderline.setValue(width);
}
Q: 解决Android 输入框将绝对定位布局视图往上顶
<activity
android:name=".MainActivity"
android:label="@string/app_name"
android:configChanges="keyboard|keyboardHidden|orientation|screenSize"
android:windowSoftInputMode="stateAlwaysHidden|adjustPan">
Q: 解决键盘收起
import { Keyboard } from 'react-native'; Keyboard.dismiss();