Question

谁能解释一下为什么键盘关闭不起作用？没有错误，也没有任何反应。

在我的上一个项目中它有效，但不存在。我做错了什么？

代码：

import React, { useState, useEffect } from 'react';
import { StyleSheet, View, Text, TextInput, TouchableOpacity, KeyboardAvoidingView, ScrollView, Dimensions, Keyboard } from 'react-native';
import { AntDesign } from '@expo/vector-icons';
import { LinearGradient } from 'expo-linear-gradient';

const width = Dimensions.get('window').width;
const height = Dimensions.get('window').height;

const Home = () => {
  const [searchInput, setSearchInput] = useState('');
  
  return (
    <KeyboardAvoidingView onPress={() => Keyboard.dismiss()} style={styles.container}>
      <LinearGradient
        style={styles.header}
        colors={['blue', 'red', 'orange']}
      >
        <View style={{alignItems: 'flex-end'}}>
          <TouchableOpacity>
            <AntDesign style={{textAlign: 'right'}} name="pluscircleo" size={42} color="#fff" />
          </TouchableOpacity>
        </View>
        <View style={styles.headerBottom}>
          <Text style={styles.headerText}>Treffpunkt</Text>
          <TextInput
            placeholder="Gebe deinen Code ein"
            value={searchInput}
            onChangeText={value => setSearchInput(value)}
            style={styles.searchInput}
          />
        </View>
      </LinearGradient>
    </KeyboardAvoidingView>
  )
};

Answer 1

正如康斯坦丁在评论中提到的，KeyboardAvoidingView 没有 onPress 事件。

你可以在渐变之前有一个子元素来为你处理压力。

可以参考博览会示例here

<KeyboardAvoidingView
  style={styles.container}>
  <TouchableWithoutFeedback onPress={() => Keyboard.dismiss()}>
    <LinearGradient
      style={styles.header}
      colors={['blue', 'red', 'orange']}>
      <View style={{ alignItems: 'flex-end' }}>
        ...
      </View>
    </LinearGradient>
  </TouchableWithoutFeedback>
</KeyboardAvoidingView>

反应本机键盘关闭不起作用

1 个答案: