khi textInput tập trung, lần chạm đầu tiên trên flatList không hoạt động, tuy nhiên lần đầu tiên hoạt động

Question

Khi tôi nhập nội dung nào đó vào TextInput, sau đó tôi chạm vào một trong các mục FlatList lần đầu tiên. Nó nên console.log ('mục báo chí'), nhưng nó không. Chỉ liên lạc thứ hai Nó bàn giao tiếp. Có ai biết lý do không?

Đây là mã của tôi.

<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

Bạn nên sử dụng FlatList với keyboardShouldPersistTaps={'handled'} prop và xử lý bàn phím của bạn gần gũi trong chức năng khác bằng cách Keyboard.Dissmiss(). FlatList của bạn sẽ như thế này:

 <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> 
      } 
     /> 

Bạn có thể sử dụng chức năng Keyboard.dismiss() trong onPress prop sau trong lệnh console.log('item press') trong TouchableHighlight thành phần.