Reactnative 当 textInput 聚焦时，第一次touch flatList 不起作用，但是第二次起作用

发布于08月23日

当我在TextInput中输入内容时，我会第一次touch 其中一个平面列表项.应该是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>
    }
/>

推荐答案

你应该使用带有keyboardShouldPersistTaps={'handled'}props 的FlatList，并在另一个功能中将键盘拉近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>
          }
        />

在TouchableHighlight组件中的console.log('item press')命令之后，可以在onPressprops 中使用Keyboard.dismiss()函数.

React-native相关问答推荐

如何在使用嵌套的堆栈导航器在选项卡之间导航后弹出到堆栈顶部？

在 React Native 中，水平滚动不适用于我的整个应用程序

任务：react-native-async-storage_async-storage：generateDebugRFile FAILED

Reactnative 当 textInput 聚焦时，第一次touch flatList 不起作用，但是第二次起作用

推荐答案

React-native相关问答推荐

如何在使用嵌套的堆栈导航器在选项卡之间导航后弹出到堆栈顶部？

在 React Native 中，水平滚动不适用于我的整个应用程序

任务：react-native-async-storage_async-storage：generateDebugRFile FAILED

在 react native 平面列表中动态定位弹出窗口

SignalR 与 React Native Expo：：什么都没有发生

React Native TextInput 在android上打开时会自动关闭

_react2.default.PropTypes.function 未定义

错误发生意外错误：https：//registry.yarnpkg.com/react-native-template-react-native-template-typescript：未找到

在 TouchableOpacity 上创建 Raised凸起或Shadow阴影效果

React Native 白色黑屏问题

React Native 入门元素Bundle 失败，出现 Unexpected Token 错误

React Native 中如何使用 Flex 居中组件？

试图注册两个同名的视图 RNGestureHandlerButton

可以react native使用jQuery

使用条码 scanner 掩码的透明视图react-native相机

SyntaxError：Strict mode does not allow function declarations in a lexically nested statement on a newly created app

WebStorm + ReactNative？

如何在 Android 手机上运行 React Native 应用程序

react-native图像预取

React Native 的最佳文件 Select 器