問題：TextInput focus時，第一次點擊 ScrollView 無效，第二次正常

代碼如下（FlatList 繼承于ScrollView，以FlatList為例演示）：

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

image.png

在 TextInput 輸入任意字符，第一次點擊‘item 1’或者‘item 2’，控制臺沒有console；第二次才會有。

解決辦法

在FlatList 添加keyboardShouldPersistTaps={'handled'}， 并且在 <TouchableHighlight> onPress 方法內 添加 Keyboard.dismiss()

FlatList 如下：

<FlatList
              keyboardShouldPersistTaps={'handled'}
              data={[{key: 'item 1'}, {key: 'item 2'}]}
              renderItem={({item}) =>
                  <TouchableHighlight onPress={() =>
                  {
                      console.log('item press');
                      Keyboard.dismiss();
                  }}
                                      underlayColor='#dddddd'>
                      <View style={{height: 40}}>
                          <Text style={{fontSize: 16, textAlign: 'center'}}>{item.key}</Text>
                      </View>
                  </TouchableHighlight>
             }
          />

結論

解決辦法適用于ScrollView，FlatList，SectionList