当textInput聚焦时,首先触摸flatList不起作用,但第二个工作

时间:2017-08-23 08:17:09

标签: react-native react-native-flatlist

当我在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>
             }
          />

1 个答案:

答案 0 :(得分:12)

您应该使用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')道具中的TouchableHighlight功能。