React Native 采坑集合

96
BigBigArvin
2017.05.11 16:13* 字数 1259

自从facebook推出react native 来,越来越多的公司开始使用,但是由于react native 目前不稳定,特别是版本迭代速度比较快,造成目前react native的坑比较多,而android由于其开放性,各个厂商都会进行修改,造成Android兼容性问题比较多。而我也加入了react native的大军中来了,下面就是在项目过程中遇到的坑,后续会持续更新:

1.如果采用export default 的方式导出一个类,引入的时候,类名前后不不能加{},加了以后就会包
Super expresstion must either be null or a function ,not undefined

正确引入方式如下:

import RNBaseController from './../base/RNBaseController.js'

export default class RNBaseController extends Component {
}
2.setState使用问题

setState方法是异步的,如果给一个state变量量赋值后,马上获取改变后的值,有可能不不正确。

Paste_Image.png
3.node服务启动问题

• 启动node服务的时候,经常出现8081端口被占用的问题
• 解决方法:
1.通过 lsof -i: 8081 查看当前使⽤用8081端口的进程
2.kill -9 <PID> 杀死使⽤用8081的进程
3.重新启动node服务

4.编写代码的过程中,经常会出现not undefined错误。较

大一部分原因是自己写的方法没有绑定.
解决方法:

<XXView xxxx={this.xxA.bind(this)} />
 在构造⽅方法中,this.xxA = this.xxA.bind(this);
 xxA = () => {}; <XXView xxxx={this.xxA}>//不不能加()
<XXView xxxx={() =>this.xxA()}/>//要加上()
5.setNativeProps

项目中经常看到下面的写法(将setNativeProps传递给子组件):

Paste_Image.png
Paste_Image.png

如果代码中不不加上述代码,会出现:Touchable child must eitherbe native or forward setNativeProps to a native component.这是因为我们封装的组件(cell)并非直接由原生视图构成,而我们只能给原生视图设置相应的属性。如果你通过extends Component 方法⾃自定义了了一个组件,直接给它设置样式prop是不不会生效的,你得把样式层层往下传递给子组件,知道子组件是一个能够直接定义样式的原生组件。

6.onSubmitEditing
onSubmitEditing的时候,在Android上调用2次,在iOS上表现正常。 解决方法:
1.设置blurOnSubmit={false} 
2.在onSubmitEditing方法中⼿手动释放键盘dismissKeyboard();
7.页面跳转卡顿

项目开发中发现页面跳转的时候会出现卡顿现象,复杂的页面表现⽐比较明显(Android平台很容易易出现)。因为navigator跳转的时候⻚页⾯面会多次调⽤用render⽅方法,造成线程阻塞。

解决方法:页面跳转完成再渲染

Paste_Image.png

减少不不必要的state变量量使用

8.data has been frozen

在rn开发中,当从一个界面跳转到新的页面,再通过点击“返回”按钮回到原列列表时,此时操作界面,使数据源的数据发生改变,会出现 data has been frozen错误,原因由于传递数据是,数据源其实都是操作的同一个对象。
解决方案:

import _loadsh from ‘lodash'
在跳转页面之前,需要传递参数的地方,拷贝数据
var mParams = _loadsh.cloneDeep(rowData);

9.界面之间的回调

如果需要从第二个界面回传值到前⼀一个界面,需要 let _this = this,否则会报错.
因为此时this的作用域并不是当前的界面,是这个回调函数的域。
解决方案如下:

 _onForward(rowData: Object) {
   var nextRoute = {
  let _this = this;
  var passParams = _this._mutableParams(this.props.params);
  passParams['id'] = rowData['id'];
   const { navigator } = _this.props;
   if(navigator) {
     navigator.push({
       component: ReleaseStripDetail,
       title: 'xxxxxx',
       passProps: {
             'params': passParams,
              refreshData: function(needRefresh:BOOL) {
               if(needRefresh){
                 InteractionManager.runAfterInteractions(()=>{
                   _this._isLoadingShow = true;
                   networkManager.showLoading();
                   _this._retrieveTab('1');
              });
            }
           }
         }
     });
   }
 }
10.ListView使用问题

当List数据源发生变化但是,刷新ListView没反应(rowHasChanged方法认为r1 仍然等于r2)
此时其实就是listview认为dataSource 没变化,此时就是要重新搞一个数组对象就好了。
解决方法:

 var ds = new ListView.DataSource(…);
 dsTmp = ds;
this.setState({dataSource:dsTmp.cloneWithRows
(…)});


或者
  let list = this.props.dataSource.slice(0); //此时会返回一个新的数组。
       this.setState({
        dataSource: ds.cloneWithRows(list),
      });

在使用Navigator的同时使用ListView或ScrollView,头部会多出一些空间,automaticallyAdjustContentInsets属性设为{false}.

11.报错:Adjacent JSX elements must be wrapped in an enclosing tag. render方法中必须只能包含一个根元素。
12.报错:Invariant Violation: onlyChild must be passed a children with exactly one child。一般是Touchable开头的几个组件,如果没有子元素或者指定多个并列列子元素都会报错。
13. image 设置src

var localImg = “./images/demo/newsImg2.png”;
require(localImg);//require中的图片名字必须是一个静态字符串 此处会报错

14.Unexpected token,expected … ,一般这种情况是程序语法有问题
15.SyntaxError

JSX value should be either an expression or a quoted JSX text (107:22),JSX语法必须用{}对变量量
进行行赋值,如 title = titleName 要换为 title = {titleName}

16.在方法内部不不可显示指定变量量的类型
17.不不要打印console.log(this) ,打印的话界面会很卡
18.inputText ,在android手机会有默认的padding属性,ios是正常的,所以android 要设置padding=0.
19 .小米部分手机不能run service ,进入开发者选项,关闭米ui优化
20.android 回调 callback.invoke("",jsonArray.toString()); 如果连续调用就会报错。
2110.修改8081默认端口号的两种方式

(1)启动项目时react-native start --port 8083

(2)手动修改项目下的node_modules\react-native\local-cli\server\server.js下的方法server.js文件,如下图所示。

Paste_Image.png
技术学习
Web note ad 1