当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

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

您可以在组件中的命令中使用prop中的Keyboard.dismiss()函数.onPressconsole.log('item press')TouchableHighlight