现在很乱,只是自己作为笔记看的,空了会整理。
_this 字段的使用
能不用尽量别用,尤其是在列表的 Item 中global 的范围:只是在 RN 类中
ScrollTabView 与其他 View 冲突,不显示的 BUG
界面适配的坑
在 for(item of datas) 中使用点击事件,需要 let id = item.id, 否则 id 的值永远会是最后一个
for(item of datas) 与 for(item in datas) 的区别
界面多个功能模块,多个接口,尽量多封装组件,因为 RN 的刷新会重绘整个组件
子组件的大小可以超过父组件, 这是非常容易造成界面的重叠
连续两层嵌套的 父组件不设置大小,第三层组件的 flex:1 或者第三方控件的大小可能会有问题
-
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) }
<View style={{position:'absolute', right:0}}>
<LiveSelectModel />
</View>
直接这样给自定义控件设置样式,其实是没有效果的,因为自定义控件没有 style 这个属性。
所以要么在使用的时候在外面包一层 <View> 用来设置样式;要么在自定义控件的内部设置样式。
考虑到自定义控件的扩展性,最好是在外面包一层 <View> 来实现FlatList 不能滚动,是否是没有设置高度,或者 flex:1
shouldComponentUpdate(){
console.log('LiveScene shouldComponentUpdate')
return true;
}
只要是重写了这个方法, 就一定要返回 true 或者 false
<View> {nodes} </View>
当使用这种写法的时候 nodes 中的每个 item 必须有个 key 属性,不然会报警告甚至其他错误。
- 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); } }
- Text 的 textAlign 属性只能让文字 横向居中,垂直居中需要包裹父布局或者自己封装下
- 网络请求类中 利用 Toast 的方式,封装一个层级最高的View,可以屏蔽频繁的网络操作
- render 中的 View 太多,可以多抽取几个单独的 render 方法
- swiper 三方控件的 bug 修复
async getCacheSize() {
const data = await CacheManager.getCacheSize();
const size = data / (1024 * 1024);
this.setState({ cacheText: size.toFixed(2) + 'M'});
}
在类中互相调用 静态方法
类名.方法名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
- onPress={control.fetchOffer}
如果 fetchOffer 是有参数的函数,那么第一个参数会是 JS 的点击事件 - otc 注册界面 昵称的键盘问题