当 textInput 聚焦时，第一次触摸 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'} 属性，并通过 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') 命令之后使用 onPress 道具中的 Keyboard.dismiss() 函数。

当 textInput 聚焦时，第一次触摸 flatList 不起作用，但第二次触摸有效

When textInput focused, first touch on flatList doesn't work, however the second works

react-native

react-native-flatlist