React Native(Expo) KeyboardAvoidingView 在 Android 中无法点击

Question

我正在开发 Expo 应用程序，但 KeyboardAvoidingView 组件在 Android 中不起作用。它在 IOS 中运行良好，但它使容器（在 KeyboardAvoidingView 内部）无法点击。我尝试在 app.json 中添加 pan，但没有解决我的问题。

Android 已经默认有KeyboardAvoidingView，但我需要为 IOS 使用KeyboardAvoidingView。

这是我的页面

import React from 'react';
import 'react-native-gesture-handler';
import { StatusBar } from 'expo-status-bar';
import { useFonts } from 'expo-font';
import {
  faSearch,
  faLock,
  faEnvelope,
} from '@fortawesome/free-solid-svg-icons';
import { FontAwesomeIcon } from '@fortawesome/react-native-fontawesome';
import {
  TouchableOpacity,
  ImageBackground,
  Dimensions,
  Text,
  View,
  StyleSheet,
  Image,
  Keyboard,
  TouchableWithoutFeedback,
  TextInput,
  KeyboardAvoidingView,
  Platform,
} from 'react-native';

export default function Home({ navigation }) {
  //Fonts define

  const [loaded] = useFonts({
    Rakkas: require('../assets/fonts/Rakkas-Regular.ttf'),
  });

  // Main page background image path
  const image = require('../assets/images/backgroundCars.jpg');

  //background man and women images path
  const manImage = require('../assets/images/man.png');
  const womenImage = require('../assets/images/women.png');

  // Closes the keyboard when clicking anywhere other than input
  const KeyboardDismiss = ({ children }) => (
    <TouchableWithoutFeedback onPress={() => Keyboard.dismiss()}>
      {children}
    </TouchableWithoutFeedback>
  );

  if (!loaded) {
    return null;
  }
  return (
    <KeyboardDismiss>
      <View style={styles.mainContainer}>
        <StatusBar translucent={true} backgroundColor="transparent" />
        <ImageBackground
          source={image}
          style={styles.backgroundImage}
          resizeMode="cover"
        >
          <Image style={styles.womenImage} source={womenImage} />
          <Image style={styles.manImage} source={manImage} />

          {/* Email and password Auth */}
          <KeyboardAvoidingView
            style={styles.authContainer}
            keyboardVerticalOffset={85}
            behavior={Platform.OS === 'ios' ? 'position' : 'height'}
          >
            <TouchableWithoutFeedback onPress={Keyboard.dismiss}>
              <View style={styles.input1}>
                {/* Email input */}
                <View style={styles.emailInputBox}>
                  <FontAwesomeIcon
                    icon={faEnvelope}
                    size={25}
                    style={styles.emailIcon}
                  />
                  <TextInput
                    style={styles.emailInput}
                    placeholder={'Type your email'}
                    textContentType="emailAddress"
                    autoCapitalize="none"
                  />
                </View>

                {/* Password Input */}

                <View style={styles.passwordInputBox}>
                  <FontAwesomeIcon
                    icon={faLock}
                    size={25}
                    style={styles.passwordIcon}
                  />
                  <TextInput
                    textContentType="password"
                    secureTextEntry={true}
                    style={styles.passwordInput}
                    placeholder={'Type your password'}
                  />
                  <Text style={styles.forgotPassword}>Forgot Password?</Text>
                </View>

                <TouchableOpacity
                  style={styles.signInButton}
                  activeOpacity={0.8}
                >
                  <Text style={styles.buttonText}>Sign In</Text>
                </TouchableOpacity>

                <Text style={styles.signUpText}>
                  Don't have an account?
                  <Text style={styles.signUpText2}> Sign Up</Text>
                </Text>
              </View>
            </TouchableWithoutFeedback>
          </KeyboardAvoidingView>
        </ImageBackground>
      </View>
    </KeyboardDismiss>
  );
}

//Get screen height and width for responsive
const width = Dimensions.get('window').width;
const height = Dimensions.get('window').height;

const styles = StyleSheet.create({
  mainContainer: {
    position: 'relative',
    flex: 1,
    elevation: 4,
    width: '100%',
    height: '100%',
    backgroundColor: '#FFCC56',
  },

  backgroundImage: {
    flex: 1,
    width: '100%',
    height: '60%',
    alignItems: 'center',
    justifyContent: 'center',
  },

  manImage: {
    width: '70%',
    height: '50%',
    right: width * -0.3,
    top: height * -0.26,
    resizeMode: 'contain',
  },

  womenImage: {
    width: '70%',
    height: '50%',
    resizeMode: 'contain',
    right: width * 0.22,
    top: height * 0.25,
  },

  authContainer: {
    flex: 1,
    elevation: 3,
    width: '100%',
    bottom: height * 0.11,
    left: '2%',
    backgroundColor: 'red',
  },

  input1: {
    position: 'relative',
    width: '96%',
    height: height * 0.34,
    top: height * -0.25,
    borderRadius: 40,
    backgroundColor: 'white',
    shadowColor: '#000',
    shadowOffset: {
      width: 0,
      height: 6,
    },
    elevation: 3,
    shadowOpacity: 0.39,
    shadowRadius: 8.3,
    justifyContent: 'center',
    alignItems: 'center',
  },

  emailInputBox: {
    position: 'absolute',
    width: '85%',
    height: '20%',
    backgroundColor: '#FFCC56',
    justifyContent: 'center',
    borderRadius: 16,
    top: height * 0.03,
    shadowColor: '#000',
    shadowOffset: {
      width: 0,
      height: 3,
    },
    elevation: 3,
    shadowOpacity: 0.27,
    shadowRadius: 4.65,
  },

  emailInput: {
    position: 'absolute',
    width: '65%',
    height: '70%',
    fontSize: 20,
    fontFamily: 'Rakkas',
    left: '25%',
  },

  emailIcon: {
    position: 'absolute',
    left: 20,
  },

  passwordInputBox: {
    position: 'absolute',
    width: '85%',
    height: '20%',
    backgroundColor: '#FFCC56',
    justifyContent: 'center',
    borderRadius: 16,
    top: height * 0.12,
    shadowColor: '#000',
    shadowOffset: {
      width: 0,
      height: 3,
    },
    elevation: 3,
    shadowOpacity: 0.27,
    shadowRadius: 4.65,
  },

  passwordInput: {
    position: 'absolute',
    width: '65%',
    height: '70%',
    fontSize: 20,
    fontFamily: 'Rakkas',
    left: '25%',
  },

  passwordIcon: {
    position: 'absolute',
    left: 20,
  },

  forgotPassword: {
    position: 'absolute',
    fontFamily: 'Rakkas',
    fontSize: 15,
    top: '120%',
    left: '35%',
    color: 'gray',
  },

  signInButton: {
    position: 'absolute',
    top: '70%',
    width: '50%',
    height: '15%',
    borderRadius: 20,
    alignItems: 'center',
    backgroundColor: 'black',
    justifyContent: 'center',
  },

  buttonText: {
    position: 'absolute',
    fontFamily: 'Rakkas',
    color: '#FFCC56',
    fontSize: 25,
  },

  signUpText: {
    position: 'absolute',
    top: '87%',
    fontSize: 15,
    fontFamily: 'Rakkas',
  },

  signUpText2: {
    position: 'absolute',
    color: 'tomato',
    fontSize: 15,
    fontFamily: 'Rakkas',
  },
});

这是我的 app.json

{
  "expo": {
    "name": "client",
    "slug": "client",
    "version": "1.0.0",
    "orientation": "portrait",
    "splash": {
      "resizeMode": "contain",
      "backgroundColor": "#ffffff"
    },
    "updates": {
      "fallbackToCacheTimeout": 0
    },
    "assetBundlePatterns": ["**/*"],
    "ios": {
      "supportsTablet": true
    },
    "android": {
      "adaptiveIcon": {
        "backgroundColor": "#FFFFFF"
      }
    }
  }
}

谢谢

Answer 1

我有这个问题 3 天，但我在这里发布后解决了? 问题与图像有关。实际上，KeyboardAvoidingView 想要在 KeyboardAvoidingView 标签内的所有内容。

无论如何，我希望有人可以使用这篇文章来解决他们的问题