React Native常见问题(一)
以下是在开发产品3个月以来遇到多的问题,希望可以帮助到遇到同样问题的小伙伴们
一 node端口被占用(找不到入口):
lsof -i:3009:查看所有3009端口
kill -9 14937 干掉14937 FID
npm install
npm start
二 iOS 图片获取不到
在Info.plist中添加NSAppTransportSecurity类型Dictionary。
在NSAppTransportSecurity下添加NSAllowsArbitraryLoads类型Boolean,值设为YES
三 引入页面
一,报错 expected a component class got objec
找不到相应的元素值.主要是component说明是找不到当前页面
四,this指向问题
一,问题描述:this2.方法名 is not a function
this 指向问题,需要在调用方式的时候绑定 this 作用域,例如:this.renderRow.bind(this),
最好是在构造函数里面进行绑定.否则活出现循环渲染,影响性能.例如this.renderRow = this.renderRow.bind(this)
五,JSON value '1' of tyoe NSNumber cannot be converted to NSStirng
原因有很多种,我遇到的是图片路径写入错误(用法)
六 StackNavigator传值
const { state, goBack } = this.props.navigation; params不能写错哈哈哈
state.params获取参数.
this.props.navigation.navigate(路由名称',{参数名:参数值})
七 Ant-Design
配置.babeirc 文件 {
"presets": [
"react-native" // this is required for debugging with react-native/packager/transformer
],
"plugins": [["import", { "libraryName": "antd-mobile" }]],
"sourceMaps": true // must be true react-native/packager/transformer using with node-module-debug
// because of some bugs from vscode-node-debug & vscode-react-native, "sourceMaps" cannot be "inline" or "both"
}
八 指定一个控件来代替ref使用
ref={textInput => {
this.textInput = textInput;
}}
this.textInput.blur(); 失去焦点.键盘消失
九 引入头文件问题
@providesModule 关键字可以解决问题
/**
* @providesModule Common
*/
一定要用多行注释
// 以前需要这样
// import Common from './../Common/Common'
// 现在可以直接用类名
import Common from 'Common'
当然react native中,使用cmd+shirt+o就能快速查找文件
10 iOS 7P上borderWidth设置成0.5,会造成透明度问题
11 react-native-snap-carousel 立体轮播图造成空白页面问题
问题产生原因是上不轮播图在自动轮的时候,不在当前页面显示人内容下,并没有停止轮播,当切换页面的时候后回造成空白页面问题.解决方案:轮播图不在页面显示内,停止轮播.
12.引入字体不生效问题
安卓上引入字体在创建assets文件下的font文件,在根目录放一个,并且放到android下的app/scr/main下面.
iOS(字体文字可以修改)直接拖拖入到工程内.配置info.plist文件如下:
13 安卓和iOS 启动空白页问题
由于在打开应用程序之前是要加载js文件.所以在加载的前是有一个空白期,这个页面会造成空白页面.
解决方案:react-native-splash-screen 方案解决
14 axios网络请求动态添加header
api 是axios创建的对象
var api = axios.create({
baseURL: API_BASE_URL,
timeout: 15000,
});
api.defaults.headers.common['authorizeCode'] = '';
修改
api.defaults.headers.common['authorizeCode'] = '111';
15 安卓打包报错找不到react-native/third-party/glog-0.3.4/文件
根目录终端运行
unlink node_modules/react-native/third-party/glog-0.3.4/test-driver
./gradlew assembleRelease // ralease 包
16 不允许设备横屏
Android，在AndroidManifest.xml中的MainActivity后面，增加属性 android:screenOrientation="portrait"
iOS 直接在Xcode里面设置General
17 生命周期循环调用该问题
注意：绝对不要在componentWillUpdate，componentDidUpdate中调用this.setState方法，否则将导致无限循环调用，在componentWillReceiveProps，shouldComponentUpdate可以
因为:这两个方式是随着render也会调用.造成一直引用
18 npm install 安装不上
npm cache clean --force 清理
在 npm install
19 引入第三方库导致link 操作.找不到RCLing 文件
原因是在于linking 时候回在iOS pod库中加入React 组件.导致找不到
解决问题: 删除pod 里面的React文件
20 inputText multiline设置多行输入 安卓默认文字居中
设置属性textAlignVertical="top"就ok
21 listView view超出屏幕范围,视图消失
removeClippedSubviews设置为false
22 动态修改naviagtion库的样式
navigation.setParams 可以刷新导航样式.需要注意要判断navigation.params第一次是是不是null.不然会报错
23 iOS10之后跳转到系统设置页面
App-Prefs:root={} 前面加上'App-'菜可以跳转
24 在模拟器上报jpush文件找不到的问题
是由于在模拟器上运行必须是debug状态才可以.release会报错
25 防止按钮多次渲染
场景: 俩个button来回点击都会渲染界面,那么多次点击一个按钮也是要渲染界面的
解决: this.setState((state) => {
if (state.city === newValue) {
return : null;
}
return: { city: 'ddddd' };
});
26 iOS 保存本地相册报错
添加RCTCameraRoll.xcodeproj 文件到library文件夹下,添加libRTCcameraRoll.a文件就ok
27, ant-mobile 走马灯Carousel安卓上只显示最后一张图片
解决: 不要设置宽度
28, 安卓问题: error: uncompiled PNG file pa ssed as argument. Must be compiled first into .flat file..
引发的问题是因为react-navigation 图片引起的的
在安卓的gradle.properties file add this line: android.enableAapt2=false 完美解决
29, 安卓升级gradle带来的问题
~/.gradle/wrapper/dists(Mac目录下)
查看版本是否可以解压
https://services.gradle.org/distributions/
下载相应的版本.放到位置上即可
30, gradlew assembleRelease failing at processReleaseResources
产生问题: 资源文件copy出现重复问题,导致打包时候不成功.
解决方法: 在node_modules/react-native/react.gradle文件下
搜索doFirst方法,在其方法后加入以下代码:
doLast {
def moveFunc = { resSuffix ->
File originalDir = file("${resourcesDir}/drawable-${resSuffix}")
if (originalDir.exists()) {
File destDir = file("${resourcesDir}/drawable-${resSuffix}-v4")
ant.move(file: originalDir, tofile: destDir)
}
}
moveFunc.curry("ldpi").call()
moveFunc.curry("mdpi").call()
moveFunc.curry("hdpi").call()
moveFunc.curry("xhdpi").call()
moveFunc.curry("xxhdpi").call()
moveFunc.curry("xxxhdpi").call()
}
31, 安卓下debug运行没问题, release崩溃
我遇到这种情况是因为我修改了android的混淆文件,在release下build设置下打开了编辑混淆文件参与编辑导致的.最好的办法是在release下关闭混淆文件.或者是在debug下打开混淆文件参与编译模式,找到错误信息的定位 .解决问题.
