反应原生键盘不驳回为什么

Question

我有一个带有flex 1的键盘avoidingview，它有一个onPress函数，应该会关闭键盘，但什么也没发生。

import { StatusBar } from 'expo-status-bar';
import React from 'react';
import { StyleSheet, Text, View, useWindowDimensions, KeyboardAvoidingView, Keyboard } from 'react-native';
import { TouchableOpacity, ScrollView, TextInput } from 'react-native-gesture-handler';
import { AntDesign } from '@expo/vector-icons';
const Home = ({ navigation }) => {
const width = useWindowDimensions().width;
const height = useWindowDimensions().height;
return (
<KeyboardAvoidingView onPress={Keyboard.dismiss} style={styles.container}>
<View style={styles.header}>
<View style={styles.headerTop}>
<TouchableOpacity>
<AntDesign name="pluscircleo" size={42} color="#fff" />
</TouchableOpacity>
</View>
<View style={{justifyContent: 'center', alignItems: 'center'}}>
<Text style={styles.title}>Restaurant</Text>
</View>
<View style={styles.inputContainer}>
<TextInput style={styles.input} placeholder="Find Restuarants" />
</View>
</View>
<StatusBar backgroundColor="#fff" />
</KeyboardAvoidingView>
)
};
const styles = StyleSheet.create({
container: {
flex: 1
},
header: {
backgroundColor: 'red',
},
headerTop: {
paddingTop: 30,
},
title: {
fontSize: 22,
color: '#fff',
},
inputContainer: {
justifyContent: 'center',
alignItems: 'center',
margin: 10
},
input: {
color: '#333',
borderColor: '#fff',
borderRadius: 5,
padding: 6,
backgroundColor: '#fff',
width: 290
}
});
export default Home;

如果我删除keyboard.dismiss并添加console.log("测试"(，那么同样不会发生任何事情。

我的问题在哪里？

谢谢你的帮助！

Answer 1

您应该用TouchableWithoutFeedback包装KeyboardAvoidingView，从KeyboardAvoidingView中删除onPress，并将其放入TouchableWithoutFeedback中

import { StyleSheet, Text, View, useWindowDimensions, KeyboardAvoidingView, Keyboard, Platform, Alert, TouchableWithoutFeedback } from 'react-native';
<TouchableWithoutFeedback onPress={Keyboard.dismiss}>
<KeyboardAvoidingView style={styles.container}>
</KeybaordAvoidingView />
</TouchableWithoutFeedback>

此处链接