React Native FlatList 有时只响应触摸答案

【问题标题】：React Native FlatList only responds to touches sometimesReact Native FlatList 有时只响应触摸
【发布时间】：2018-05-09 08:12:09
【问题描述】：

我以前在我的应用程序的多个位置使用FlatList 没有任何问题，但现在当我创建一个新的时，它似乎没有正确注册触摸/滑动。似乎只有 1/6 次触摸才能注册。

在此处观看视频：https://photos.app.goo.gl/NZCtVYX6GLVCQN392

这就是我使用FlatList的方式：

render() {
        return (
            <Container>
                ...
                <FlatList
                    data={this.state.exercises}
                    renderItem={({item}) =>
                        <SetsRepsAndWeightItem exercise={item}/>
                    }
                    keyExtractor={item => item.name}
                    style={style.list}
                />
            </Container>
        );
}

还有SetsRepsAndWeightItem：

render() {
        return (
            <View style={style.container}>
                <View style={style.header}>
                    <Text style={style.headerText}>{this.props.exercise.name}</Text>
                </View>
                <View style={style.about}>
                    <TouchableWithoutFeedback onPress={this.handleSetsPressed}>
                        <StatisticNumber metric="Sets" value={7}/>
                    </TouchableWithoutFeedback>
                    <TouchableWithoutFeedback onPress={this.handleRepsPressed}>
                        <StatisticNumber metric="Reps" value={5}/>
                    </TouchableWithoutFeedback>
                    <TouchableWithoutFeedback onPress={this.handleWeightPressed}>
                        <StatisticNumber metric="kg" value={35}/>
                    </TouchableWithoutFeedback>
                </View>
            </View>
        );
}

handleSetsPressed = () => {
    console.log("sets pressed");
}

handleRepsPressed = () => {
    console.log("reps pressed");
}

handleWeightPressed = () => {
    console.log("weight pressed");
}

另外：TouchableWithoutFeedback 元素在被触摸时不会调用它们的 onPress 函数。

Container 就这么简单：

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

【问题讨论】：

我认为你的问题是你在渲染方法上做了太多的工作。请发布您的处理方法和容器。也许你记录的太多了，它拖了屏幕。
@sfratini 我非常怀疑这会是原因，但我用它更新了问题。我将Container 与我的其他FlatLists 一起用于屏幕，这些都没有问题。
如果您删除父级的键盘关闭会发生什么？
@sfratini 确实解决了滚动问题:)！尽管每个SetsRepsAndWeightItem 中的按钮仍然不调用它们的onPress 函数。

标签： reactjs react-native scroll touch react-native-flatlist

【解决方案1】：

以下两个修复解决了我的问题：

从Container 组件中移除onPress={() => Keyboard.dismiss()}
将TouchableWithoutFeedback 移动到StatisticNumber 组件中，并将onPress 作为来自SetsRepsAndWeightItem 的prop 传递

【讨论】：