Question

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

这是我的LoginScreen：

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"后，键盘与登录按钮重叠：

Answer 1

使用这是您的android清单

<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">

尝试此方法将解决此问题

Answer 2

尝试一下。

    {Platform.OS === 'ios' ?
                <KeyboardAvoidingView style={styles.container} behavior="padding">
                    <ScrollView showsVerticalScrollIndicator={false} contentContainerStyle={{paddingVertical: 10}}
                                keyboardShouldPersistTaps='handled'>

                        <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>
                    </ScrollView>
                </KeyboardAvoidingView>
                : <ScrollView showsVerticalScrollIndicator={false} contentContainerStyle={{paddingVertical: 10}}
                              keyboardShouldPersistTaps='handled'>


                    <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>
                </ScrollView>
    }

样式是

const styles = StyleSheet.create({
container: {
    flex: 1, paddingVertical: 30,
    alignItems: 'center', justifyContent: 'center',
    backgroundColor: '#FFFFFF',
},
logo: {
    flexGrow: 1,
    width: '80%',
    resizeMode: 'contain',
    alignSelf: 'center',
},
form: {
    flexGrow: 1,
    justifyContent: 'center',
    width: '80%',
},

});

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

2 个答案: