React Native问题汇总

2024年1月21日 206次阅读 来源: 木木少烈

说明：这是一篇用来记录和收集自己或大家使用react native开发时遇到的坑或问题，大家可以通过评论的方式来分享你遇到的坑或者是暂时解决不了的问题，最后我会将这些问题和解决方法填充到这篇文章上，大家共同进步。

1、 react native支持iOS和android，如何判断当前设备运行的平台呢？
答：可以通过引入Platform文件，如下：

var Platform = require('Platform');
render() {
    var platform = 'iOS';
    if(Platform.OS === 'android'){
      platform = 'android'
    }
    return (
           {platform} 
    );
}

2、 怎样让键盘回收？
答：通过引入dismissKeyboard文件，如下：

var dismissKeyboard = require('dismissKeyboard');
dismissKeyboard();

3、 在使用Native的View时，需要注意哪些问题？
答：因为在使用Native的View时，首先View需要遵循<RCTComponent>协议，当然，我们可以直接继承RCTView，并且import入UIView+React.h文件，然后还需要一个RCTViewManager来管理这个View，通过子类化RCTViewManager后，实现- (UIView<RCTComponent> *)view返回自定义的View，要注意的是：这个方法在执行的过程中会被调用两次，所以，可能在使用的时候会遇到坑。

4、 使用RCT_EXPORT_MODULE时要注意什么？
答：到使用native的View时，如果定义的Manager类是以Manager结尾，那么使用RCT_EXPORT_MODULE时，要给导出的module添加一个别名：RCT_EXPORT_MODULE(【module name】)，这个别名不能以Manager结尾，否则导不出去（使用环境：react-native 0.1.5， 0.1.5之后好像修复了）

5、使用RCT_EXPORT_METHOD时要注意什么？
答：使用RCT_EXPORT_METHOD导出的方法必须将callback定义在最后，如下：

//错误
RCT_EXPORT_MODULE(saySomething:(NSString *)something callback:(RCTResponseSenderBlock)callback male:(BOOL)isMale)
//正确
RCT_EXPORT_MODULE(saySomething:(NSString *)something male:(BOOL)isMale callback:(RCTResponseSenderBlock)callback)

6、使用RCT_EXPORT_VIEW_PROPERTY导出RCTDirectEventBlock或RCTBubblingEventBlock 类型的属性时有什么要求？
答：RCTDirectEventBlock或RCTBubblingEventBlock 类型，实际上就是Block类型，源码上是这样的：

typedef void (^RCTDirectEventBlock)(NSDictionary *body);
typedef void (^RCTBubblingEventBlock)(NSDictionary *body);

属性名称要以on开头，如：

RCT_EXPORT_VIEW_PROPERTY(onSelectedAtIndex, RCTDirectEventBlock)

并且在JS代码中进行类型检测，如：

CustomModule.propTypes = {
      onSelectedAtIndex: React.PropTypes.func,
};

7、怎样同步修改state，并让component重新render呢？
答：我们知道当state改变时，component会重新render，前提是使用setState来修改state的属性，但是setState是异步执行的，如果要同步执行可以使用this.state.property_name来修改state的属性，但是这样修改是没办法让系统知道state已经改变了，所以不会重新render。不过我们可以通过调用forceUpdate方法来让它强制更新，这样就能实现同步修改并重新render了。注：这种做法不太推荐。

  1. 慎重调用setState方法
    答：setState是不能随便调用的，只要你调用了其实就相当于调用了forceUpdate，即使你并没有修改state里面的字段，系统还是会调用render
    原文作者：木木少烈
    原文地址: https://www.jianshu.com/p/3f68abf99975
    本文转自网络文章，转载此文章仅为分享知识，如有侵权，请联系博主进行删除。
点赞