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>
        );
      }
    }