最近因为项目需要,又折腾起React native。RN理念很好,坑也很多。这几天就遇到了使用model封装弹框时,里面的FlatList不能滚动问题。其中的主要的两个方法如下
render() {
return (
<View>
<Modal
animationType={"fade"}
transparent={true}
visible={this.state.modalVisible}
onRequestClose={() => {alert("Modal has been closed.")}}
>
<TouchableOpacity
//style={{flex:1,justifyContent:'center', alignItems:'center',backgroundColor:'rgba(0,0,0,0.3)',}}
style={{flex:1,backgroundColor:'rgba(0,0,0,0.3)',}}
onPress={()=>{
this.setModalVisible(false)
}}
activeOpacity={1}
>
<TouchableOpacity
activeOpacity={1}
style={{width:200,backgroundColor:'white',position: 'absolute', top:40,left:40}}
onPress={()=>{
}}
>
<FlatList
data={this.props.dataArray}
onScroll={()=>{
console.log('scroll');
}}
style={{padding:5}}
renderItem={(data)=>this._renderItem(data)}
keyExtractor = {this._extraUniqueKey}// 每个item的key
/>
</TouchableOpacity>
</TouchableOpacity>
</Modal>
</View>
);
}
_renderItem(data){
return (
<View
onPress={()=>{
this.clickItem(data)
}}
>
<View style={styles.styleItem}
>
<Text style={{fontSize:16}}>
{data.item}
</Text>
</View>
</View>
);
}
_extraUniqueKey(item ,index){
return "index"+index+item;
}
效果如下。但Flatlist无法滚动
谷歌后发现一解决办法就是将renderItem中的父容器由View改成TouchOpacity(Touch系列组件应该都可以),然后就正常滚动了。原因未知,应该是RN的一个BUG。