React Native问题汇总

作者: 木木烈少 | 来源:发表于2015-10-25 02:17 被阅读1596次

    说明:这是一篇用来记录和收集自己或大家使用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导出RCTDirectEventBlockRCTBubblingEventBlock 类型的属性时有什么要求?
    答: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

    相关文章

      网友评论

      • 57d54b9ae71b:踩了个坑,花了2个多小时查不出某个 nativeComponent 的 event 为什么不调用……
        无意看到这篇文章,敢问博主 6 里面「属性名称要以on开头」你是怎么知道的……
        花了个缺:楼主,问下onSelectedAtIndex,这个方法为什么只能回调一次,第二次就回调不了了,求大神赐教:grin:
        57d54b9ae71b:@木木少烈 :joy_cat:
        木木烈少:@Arthur阳 我也是踩着坑过来的:joy:
      • 庸者的救赎:收藏了
      • c956742f4f7b:android下如何实现多activity呢,又在jsx中如何结束当前activity呢
        c956742f4f7b: @林少烈 多谢提点,研究下看是不是我想要的
        木木烈少:@乌篷船 通过navigator进行页面的跳转

      本文标题:React Native问题汇总

      本文链接:https://www.haomeiwen.com/subject/hmtxhttx.html