Reactjs React Native FlatList有时仅对触摸做出响应
我以前在我的应用程序中的多个地方使用了Reactjs React Native FlatList有时仅对触摸做出响应,reactjs,react-native,scroll,touch,react-native-flatlist,Reactjs,React Native,Scroll,Touch,React Native Flatlist,我以前在我的应用程序中的多个地方使用了FlatList,没有任何问题,但现在当我创建一个新的时,它似乎没有正确注册触摸/滑动。似乎只有1/6的触摸记录下来 请参见此处的视频: 这就是我如何使用平面列表的方法: render() { return ( <Container> ... <FlatList data={this.state.e
FlatList
,没有任何问题,但现在当我创建一个新的时,它似乎没有正确注册触摸/滑动。似乎只有1/6的触摸记录下来
请参见此处的视频:
这就是我如何使用平面列表的方法:
render() {
return (
<Container>
...
<FlatList
data={this.state.exercises}
renderItem={({item}) =>
<SetsRepsAndWeightItem exercise={item}/>
}
keyExtractor={item => item.name}
style={style.list}
/>
</Container>
);
}
另外:TouchableWithoutFeedback
元素在被触摸时不会调用其onPress
功能
容器
就这么简单:
export default class Container extends Component {
static propTypes = {
children: Proptypes.any,
backgroundColor: Proptypes.string
};
render() {
const containerStyles = StyleSheet.flatten([
style.container,
this.props.backgroundColor ? { backgroundColor: this.props.backgroundColor } : null,
]);
return (
<TouchableWithoutFeedback onPress={() => Keyboard.dismiss()}>
<View style={containerStyles}>
{this.props.children}
</View>
</TouchableWithoutFeedback>
);
}
}
导出默认类容器扩展组件{
静态类型={
孩子们:任何人,
背景颜色:Proptypes.string
};
render(){
const containerStyles=StyleSheet.flatte([
style.container,
this.props.backgroundColor?{backgroundColor:this.props.backgroundColor}:null,
]);
返回(
Keyboard.disclose()}>
{this.props.children}
);
}
}
以下两个修复为我解决了问题:
从容器
组件中删除onPress={()=>键盘.dismise()}
将无反馈触摸屏
移动到StatisticNumber
组件中,并将on按
作为道具从setsreps和weightItem
我认为你的问题是你在渲染方法上做了太多的工作。请张贴您的处理方法和容器。也许你做了太多的日志记录,它正在拖拽屏幕。@sfratini我非常怀疑这是原因,但我用它更新了问题。我将容器
用于我的其他平面列表
的屏幕,这些屏幕上没有问题。如果删除父级的键盘,会发生什么情况?@sfratini解决了滚动问题:)!尽管每个setsreps和weightItem
中的按钮仍不调用其onPress
功能。
export default class Container extends Component {
static propTypes = {
children: Proptypes.any,
backgroundColor: Proptypes.string
};
render() {
const containerStyles = StyleSheet.flatten([
style.container,
this.props.backgroundColor ? { backgroundColor: this.props.backgroundColor } : null,
]);
return (
<TouchableWithoutFeedback onPress={() => Keyboard.dismiss()}>
<View style={containerStyles}>
{this.props.children}
</View>
</TouchableWithoutFeedback>
);
}
}