阵营本地FlatList只响应触摸有时

我已经在我的应用程序的多个位置使用FlatList以前没有任何问题，但现在当我创建了一个新的一个似乎不注册触摸/挥笔正确。只有1/6触摸似乎注册。阵营本地FlatList只响应触摸有时

在这里看到的视频：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> 
    ); 
    } 
}

来源

2017-11-25 Axel Kennedal

我认为你的问题是你在渲染方法上做了太多的工作。请张贴您的处理方法和容器。也许你做了太多的日志记录，它正在拖动屏幕。 – sfratini

@sfratini我很怀疑会的原因，但我更新了它的问题。我使用'Container'作为屏幕和其他'FlatList'，这些都没有问题。 –

如果您取消父母的键盘解除，会发生什么情况？ – sfratini

下面的两个补丁解决了这个问题对我来说：

从Container组件拆下onPress={() => Keyboard.dismiss()}
移动TouchableWithoutFeedback入StatisticNumber分量，并传递onPress作为道具从SetsRepsAndWeightItem

来源

2017-11-29 15:44:43

阵营本地FlatList只响应触摸有时

回答

相关问题