当文本输入聚焦时，第一次触摸 flatList 不起作用，但第二次有效

Question

当我在TextInput中键入内容时，我第一次触摸FlatList项目之一。它应该console.log('item press')，但它不是。只有第二次触摸它控制台。有人知道原因吗？

这是我的代码。

<TextInput
placeholder='test'
value={this.state.inputText}
onChangeText={(inputText) => this.setState({inputText})}
style={{
marginBottom: 20, 
fontSize: 17, 
width: 300, 
textAlign: 'center''
}}
/>
<FlatList
data={[{key: 'item 1'}, {key: 'item 2'}]}
renderItem={({item}) =>
<TouchableHighlight 
onPress={() => console.log('item press')}
underlayColor='#dddddd'
>
<View style={{height: 40}}>
<Text style={{fontSize: 16, textAlign: 'center'}}>{item.key}</Text>
</View>
</TouchableHighlight>
}
/>

Answer 1

您应该将FlatList与keyboardShouldPersistTaps={'handled'}prop 一起使用，并通过Keyboard.Dissmiss()在另一个功能中关闭键盘。 你的FlatList将是这样的：

<FlatList
keyboardShouldPersistTaps={'handled'}
data={[{key: 'item 1'}, {key: 'item 2'}]}
renderItem={({item}) =>
<TouchableHighlight onPress={() => console.log('item press')}
underlayColor='#dddddd'>
<View style={{height: 40}}>
<Text style={{fontSize: 16, textAlign: 'center'}}>{item.key}</Text>
</View>
</TouchableHighlight>
}
/>

您可以在组件TouchableHighlight的console.log('item press')命令之后使用onPressprop 中的Keyboard.dismiss()函数。