如何在React Native中使用KeyboardAvoidingView以在键盘打开时移除图像？

Question

如何在 React Native 中使用 KeyboardAvoidingView ，以便在键盘打开时删除图像？我建立了一个应用程序登录页面，该登录页面顶部有一个标志性的图像。因此，当我输入电子邮件到登录页面时，键盘会打开，然后徽标图像和登录表单会相互干扰，看起来很糟糕。

那么，如何在键盘打开时删除图像呢？我尝试使用 KeyboardAvoidingView 但它没有起作用，我认为我没有正确使用它，所以有人可以告诉我在我的情况下如何正确使用它吗？

import { StyleSheet, Text, View, Image, TextInput, Button, } from 'react-native'
import React from 'react'
import logo from '../../../../assets/Instagram_Logo.png';
import { containerFull, hr80, logo1 } from '../../../CommonCss/PageCss';
import { formbtn, formHead, formInput, formTextLinkCenter, formTextLinkRight } from '../../../CommonCss/FormCss';

const Login = ({ navigation }) => {
  return (
    <View style={containerFull}>
      <Image source={logo} style={logo1} />
      <Text style={formHead}>Login</Text>
      <TextInput placeholder='Enter your email' placeholderTextColor="grey" style={formInput} />
      <TextInput placeholder='Password' placeholderTextColor="grey" style={formInput} secureTextEntry={true} />
      <Text style={formTextLinkRight}
        onPress={() => navigation.navigate('forgetpassword_email')}>Forget Password?</Text>
      <Text style={formbtn}
        onPress={() => navigation.navigate('mainpage')}>Submit</Text>
      <View style={hr80}></View>
      <Text style={formTextLinkCenter}>Don't have an account?
        <Text style={{ color: 'white' }} onPress={() => navigation.navigate('signup_email')}> SignUp</Text></Text>
    </View>
  )
}

export default Login

const styles = StyleSheet.create({})

- user20731273

Answer 1

你可以使用键盘事件监听器获取一个状态变量，并管理它来显示或隐藏图像。

const [isKeyboardVisible, setKeyboardVisible] = useState(false);

useEffect(() => {
   const keyboardDidShowListener = 
    Keyboard.addListener(
  'keyboardDidShow',
  () => {
    setKeyboardVisible(true); // or some other action
  }
);
const keyboardDidHideListener = Keyboard.addListener(
  'keyboardDidHide',
  () => {
    setKeyboardVisible(false); // or some other action
  }
);

return () => {
  keyboardDidHideListener.remove();
  keyboardDidShowListener.remove();
};
}, []);


return (
 <View style={containerFull}>
  { !isKeyboardVisible&& (<Image source={logo} style={logo1} />)}
  <Text style={formHead}>Login</Text>
  <TextInput placeholder='Enter your email' placeholderTextColor="grey" style={formInput} />
  <TextInput placeholder='Password' placeholderTextColor="grey" style={formInput} secureTextEntry={true} />
  <Text style={formTextLinkRight}
    onPress={() => navigation.navigate('forgetpassword_email')}>Forget Password?</Text>
  <Text style={formbtn}
    onPress={() => navigation.navigate('mainpage')}>Submit</Text>
  <View style={hr80}></View>
  <Text style={formTextLinkCenter}>Don't have an account?
    <Text style={{ color: 'white' }} onPress={() => navigation.navigate('signup_email')}> SignUp</Text></Text>
</View>
)

- Jatin Bhuva