android - 在 Android 中测试的 React Native 项目中使用 KeyboardAvoidingView 重叠

Question

我正在创建一个登录名，并解决了覆盖我正在使用的文本输入的虚拟键盘的问题KeyboardAvoidingView。我认为徽标的动画效果会很好，因为我将表单和徽标都定义为 flex: 1（在可用空间中尽可能缩小/增长）由于打开键盘会减少屏幕上的可用空间，因此徽标确实会改变，但收缩太多，然后发生重叠。我错过了什么？

这是我的登录屏幕：

import React, { Component } from 'react'
import { Image, StyleSheet, View, KeyboardAvoidingView, Button } from 'react-native'
import FormTextInput from '../components/FormTextInput'

class LoginScreen extends Component {
  state = { email: '', password: '' }

  handleEmailUpdate = email => {
    this.setState({ email })
  }

  handlePasswordUpdate = password => {
    this.setState({ password })
  }

  handleLoginPress = () => {
    console.log('Login button pressed')
  }

  render() {
    return (
      <KeyboardAvoidingView style={styles.container} behavior="padding">
        <Image style={styles.logo} source={require('../assets/images/test.png')} />

        <View style={styles.form}>
          <FormTextInput
            value={this.state.email}
            onChangeText={this.handleEmailChange}
            placeholder="Email"
            autoCorrect={false}
            keyboardType="email-address"
            returnKeyType="next"
          />
          <FormTextInput
            placeholder="Password"
            value={this.state.password}
            onChangeText={this.handlePasswordChange}
            secureTextEntry
            returnKeyType="done"
          />
          <Button title="LOGIN" onPress={this.handleLoginPress} />
        </View>
      </KeyboardAvoidingView>
    )
  }
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    alignItems: 'center',
    justifyContent: 'space-between',
  },
  logo: {
    flex: 1,
    width: '80%',
    resizeMode: 'contain',
    alignSelf: 'center',
  },
  form: {
    flex: 1,
    justifyContent: 'center',
    width: '80%',
  },
})

export default LoginScreen

*编辑：添加行后android:windowSoftInputMode="adjustPan"，键盘与登录按钮重叠：

标签： androidreact-native

Answer 1

使用这是你的 android manifest

<activity
            android:name=".MainActivity"
            android:label="@string/app_name"
            android:configChanges="keyboard|keyboardHidden|orientation|screenSize"
            android:screenOrientation="portrait"
            android:launchMode="singleTop"
            android:windowSoftInputMode="adjustPan" //add this line
            android:exported="true">

试试这个它会解决这个问题