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

您应该使用 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>
          }
        />

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