陣營本地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只響應觸摸有時

回答

相關問題