React Native TextInput focus时,第一次点击 ScrollView 无效解决办法

问题:TextInput focus时,第一次点击 ScrollView 无效,第二次正常

代码如下(FlatList 继承于ScrollView,以FlatList为例演示):

           this.setState({inputText})}
              style={{marginBottom: 20, fontSize: 17, width: 300, textAlign: 'center'}}
          />
          
                  
                  {
                      console.log('item press');
                  }}
                                      underlayColor='#dddddd'>
                      
                          {item.key}
                      
                  
             }
          />
React Native TextInput focus时,第一次点击 ScrollView 无效解决办法_第1张图片
image.png

在 TextInput 输入任意字符,第一次点击‘item 1’或者‘item 2’,控制台没有console;第二次才会有。

解决办法

在FlatList 添加keyboardShouldPersistTaps={'handled'}, 并且在 onPress 方法内 添加 Keyboard.dismiss()

FlatList 如下:


                  
                  {
                      console.log('item press');
                      Keyboard.dismiss();
                  }}
                                      underlayColor='#dddddd'>
                      
                          {item.key}
                      
                  
             }
          />

结论

解决办法适用于ScrollView,FlatList,SectionList

你可能感兴趣的:(React Native TextInput focus时,第一次点击 ScrollView 无效解决办法)