RN 踩坑

作者: 金樽明月 | 来源:发表于2018-01-19 11:17 被阅读0次

    现在很乱,只是自己作为笔记看的,空了会整理。

    1. _this 字段的使用
      能不用尽量别用,尤其是在列表的 Item 中

    2. global 的范围:只是在 RN 类中

    3. ScrollTabView 与其他 View 冲突,不显示的 BUG

    4. 界面适配的坑

    5. 在 for(item of datas) 中使用点击事件,需要 let id = item.id, 否则 id 的值永远会是最后一个

    6. for(item of datas) 与 for(item in datas) 的区别

    7. 界面多个功能模块,多个接口,尽量多封装组件,因为 RN 的刷新会重绘整个组件

    8. 子组件的大小可以超过父组件, 这是非常容易造成界面的重叠

    9. 连续两层嵌套的 父组件不设置大小,第三层组件的 flex:1 或者第三方控件的大小可能会有问题

    10. for (item of content_data) {

           let seriesCode = item.seriesCode;
           let data = item;
           let album_node = <AlbumView
                               horizontal = {true}
                               onPress = {()=>{
                                   console.log('title:' + title + "item.seriesCode" + seriesCode);
                                   DeviceEventEmitter.emit('EVENT_NAME_PLAY_VOD',{show:true,seriesCode:seriesCode});
                               }}
                               data = {data}
                               /> 
           album_nodes.push(album_node)
       }
      
    11. <View style={{position:'absolute', right:0}}>
      <LiveSelectModel />
      </View>
      直接这样给自定义控件设置样式,其实是没有效果的,因为自定义控件没有 style 这个属性。
      所以要么在使用的时候在外面包一层 <View> 用来设置样式;要么在自定义控件的内部设置样式。
      考虑到自定义控件的扩展性,最好是在外面包一层 <View> 来实现

    12. FlatList 不能滚动,是否是没有设置高度,或者 flex:1

    13. shouldComponentUpdate(){
      console.log('LiveScene shouldComponentUpdate')
      return true;
      }
      只要是重写了这个方法, 就一定要返回 true 或者 false

    <View> {nodes} </View>

    当使用这种写法的时候 nodes 中的每个 item 必须有个 key 属性,不然会报警告甚至其他错误。

    1. FlatList 的滚动到底部,需要同时使用
      onEndReached
      onEndReachedThreshold
      这两个方法。
      严重 bug:这个 onEndReached 默认只会调用一次(官方文档没有说,github 竟然关闭了这个 issue).
      只有当 flatlist 的数据源发生了变化后,这个方法才会重新调用
    如何实现滚动到底部的判断

    scrollEventThrottle={200} onScroll={(e)=>{this._onScroll(e)}} _onScroll = (e)=>{ if(isScrollingEnd) return; let scrollH = e.nativeEvent.contentSize.height; let y = e.nativeEvent.contentOffset.y; let height = e.nativeEvent.layoutMeasurement.height; // console.log("contentOffset: " + y + "contentSize.height" + scrollH); if (scrollH - height < y) { isScrollingEnd = true; // console.log("RecommentPage 到底了"); setTimeout(()=>{ // console.log("RecommentPage 回滚"); isScrollingEnd = false; let dataList = this.state.dataList; // console.log("length:" + dataList.length); let offet = scrollH - height - Resolution.getFix(60); this.flatList && this.flatList.scrollToOffset({animated: true, offset: Number(offet)}); }, 3000); } }

    1. Text 的 textAlign 属性只能让文字 横向居中,垂直居中需要包裹父布局或者自己封装下
    2. 网络请求类中 利用 Toast 的方式,封装一个层级最高的View,可以屏蔽频繁的网络操作
    3. render 中的 View 太多,可以多抽取几个单独的 render 方法
    4. swiper 三方控件的 bug 修复

    async getCacheSize() {
    const data = await CacheManager.getCacheSize();
    const size = data / (1024 * 1024);
    this.setState({ cacheText: size.toFixed(2) + 'M'});
    }

    1. 在类中互相调用 静态方法
      类名.方法名

    2. scrollTabView 中使用 flatList ,FlatList 不能直接下拉刷新, 需要先向上滑再向下滑。
      解决:一个 Compnent 中只放一个 ScrollTabView , 或者其他 View 使用 position: 'absolute'
      21 TabNavigator 中的某个页面顶部有一行空白
      解决:很可能是 没有隐藏默认的导航栏
      static navigationOptions = ({navigation}) => ({header: null})

    <TextInput style={styles.textInput} placeholder={control.t(AppMessage.PleaseEnterYourRealName)} placeholderTextColor={colors.text999} autoCapitalize={"none"} underlineColorAndroid={"transparent"} value={state.realName} onChangeText={(text) => { console.log("text---" + text); this.setState({realName: text}); }} onEndEditing={(evt) => this.setState({ realName: evt.nativeEvent.text })} />
    解决 rn 的输入框,在 iOS 上使用 原生键盘无法正常输入中文问题。
    https://www.jianshu.com/p/21522f7a492e

    1. onPress={control.fetchOffer}
      如果 fetchOffer 是有参数的函数,那么第一个参数会是 JS 的点击事件
    2. otc 注册界面 昵称的键盘问题

    相关文章

      网友评论

          本文标题:RN 踩坑

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