react-native - 当 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

您应该使用FlatListwithkeyboardShouldPersistTaps={'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>
          }
        />

您可以在组件中的命令之后使用道具中的Keyboard.dismiss()功能。onPressconsole.log('item press')TouchableHighlight