react-native - 反应本机键盘不解雇为什么？

Question

我有一个带有 flex 1 的键盘避免视图，带有一个 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('test') 然后什么也没有发生。

我的问题在哪里？

感谢您的帮助！

标签： react-native

Answer 1

您应该将 with 包裹KeyboardAvoidingView起来并从中TouchableWithoutFeedback移除，然后将其放入 TonPressKeyboardAvoidingViewouchableWithoutFeedback

import { StyleSheet, Text, View, useWindowDimensions, KeyboardAvoidingView, Keyboard, Platform, Alert, TouchableWithoutFeedback } from 'react-native';

<TouchableWithoutFeedback onPress={Keyboard.dismiss}>
        <KeyboardAvoidingView style={styles.container}>
   </KeybaordAvoidingView />
 </TouchableWithoutFeedback>

链接在这里