React Native KeyboardAvoidingView 无法正常工作

Question

我正在尝试将 KeyboardAvoidingView 与 behavior="padding" 一起使用。

当我尝试在 TextInput 中输入任何文本时，TextInput 字段没有向上移动。我在最后添加了一个小视图，它正在向上移动，但它上面的视图。

我也有带偏移量的 KeyboardAvoidingView 高度属性。它工作的组件很少，例如 2 个 TextInputs。但是当我添加所有组件时，UI 会变得疯狂并且表现得混乱。

知道这里发生了什么吗？

这里是我遵循的教程的link。

render() {
    return (
        <View style={styles.backgroundContainer}>
            <Loader
                loading={this.state.isLoading} />
            <KeyboardAvoidingView
                keyboardVerticalOffset={10}
                style={styles.mainContainer}
                behavior='padding' >
                <View style={styles.formContainer}>
                    <View style={[styles.centerContainer, { marginTop: 40 }]}>
                        <Image source={require('./../../Resources/logo.png')} />
                        <Text style={{ fontWeight: 'bold', color: 'gray', fontSize: 25 }}>AppName</Text>
                        <Text style={styles.loginMsg}> Login to your Account </Text>
                    </View>
                    <View style={styles.inputFieldsContainer}>
                        <Image style={{ width: 30, height: 30, margin: 5 }} source={require('./../../Resources/logo.png')} />
                        <TextInput
                            placeholder='Email'
                            returnKeyType='next'
                            keyboardType='email-address'
                            onChangeText={(value) => this.setState({ userEmail: value })}
                            onSubmitEditing={() => this.passwordInput.focus()}
                            style={styles.inputFields} />
                    </View>
                    <View style={styles.inputFieldsContainer}>
                        <Image style={{ width: 30, height: 30, margin: 5, }} source={require('./../../Resources/logo.png')} />
                        <TextInput
                            returnKeyType='go'
                            secureTextEntry
                            placeholder='Password'
                            ref={(input) => this.passwordInput = input}
                            onChangeText={(value) => this.setState({ password: value })}
                            style={styles.inputFields} />
                    </View>
                    <View style={styles.buttonContainer}>
                        <Button
                            fontSize='8'
                            color='gray'
                            title='Remember Me'
                            onPress={() => {
                                console.log('Remember Me Clicked');
                            }} />
                        <Button
                            color='gray'
                            title='Forgot Password?'
                            onPress={() => {
                                console.log('Forgot Password Clicked');
                            }} />
                    </View>
                    <TouchableOpacity
                        style={styles.buttonLogin}
                        onPress={() => {
                                console.log('Login Clicked');
                        }}
                    >
                        <Text style={{ fontSize: 20, fontWeight: 'bold', color: 'white' }}>Login</Text>
                    </TouchableOpacity>
                    <View style={{ height: 1, backgroundColor: 'gray', marginTop: 20, marginBottom: 1 }}>
                    </View>
                    <View style={[styles.centerContainer, { marginBottom: 10 }]}>
                        <Text style={styles.loginMsg}>Don't have a Account</Text>
                        <TouchableOpacity
                            style={styles.buttonRegister}
                            onPress={() => navigate('Register')} >
                            <Text style={styles.buttonRegisterText}>REGISTER NOW</Text>
                        </TouchableOpacity>
                    </View>
                </View>
                <View style={{ height: 10, backgroundColor: '#628499', }}>
                </View>
            </KeyboardAvoidingView>
        </View>
    );
}
const styles = StyleSheet.create({
backgroundContainer: {
    flex: 1, backgroundColor: 'green'
},
mainContainer: {
    flex: 1, margin: 25,
    borderWidth: 1, borderRadius: 5, borderColor: 'gray',
    backgroundColor: 'white',
    justifyContent: 'space-between'
},
formContainer: {
    flex: 1, paddingLeft: 25, paddingRight: 25
},
centerContainer: {
    alignItems: 'center', marginBottom: 10,
},
loginMsg: {
    margin: 10,
    fontSize: 20, color: 'gray'
},
inputFieldsContainer: {
    flexDirection: 'row', margin: 10,
    borderWidth: 1, borderRadius: 5, borderColor: 'gray',
},
inputFields: {
    flexGrow: 1,
    marginTop: 5, marginBottom: 5,
    height: 30,
    backgroundColor: 'rgba(255,255,255,0.4)',
    paddingHorizontal: 10,
},
buttonContainer: {
    flexDirection: 'row',
    justifyContent: 'space-between'
},
buttonLogin: {
    alignItems: 'center', height: 40, marginTop: 10, marginLeft: 50, marginRight: 50, padding: 5,
    backgroundColor: '#2980b9',
    borderWidth: 1, borderRadius: 5, borderColor: 'gray'
},
buttonRegister: {
    alignItems: 'center', height: 40,
    marginLeft: 50, marginRight: 50
},
buttonRegisterText: {
    fontSize: 20, fontWeight: 'bold', color: 'gray'
},
loading: {
    position: 'absolute',
    left: 0, right: 0, top: 0, bottom: 0,
    alignItems: 'center', justifyContent: 'center'
}, });

Answer 1

我使用了 KeyboardAvoidingView，它也不起作用。 我找到了这个解决方案，你可以拿基础代码。

安装

npm i react-native-keyboard-aware-scroll-view --save

用法

import { KeyboardAwareScrollView } from 'react-native-keyboard-aware-scroll-view'

<KeyboardAwareScrollView>
  <View>
    <TextInput />
  </View>
</KeyboardAwareScrollView>

你可以找到它here

Answer 2

<KeyboardAvoidingView
  style={styles.mainContainer}
  behavior="padding"
  enabled
>
  <View>.......................</View>
</KeyboardAvoidingView>

应添加“启用或禁用 KeyboardAvoidingView”。

Answer 3

请记住，flex:1 始终是您的顶级父级，然后您的子级就是您的文本输入容器，如果您使用此方法，它始终是其测试方法。

<KeyboardAvoidingView style={{  flex: 1 }}
    behavior={Platform.OS === "ios" ? "position" : null} enabled>
      <ScrollView>
        <View>
          <View >
            <Text maxFontSizeMultiplier={1.5} >
              Sign in to your account{" "}
            </Text>
             <View
                behavior="padding"
                enabled
              >
                <TextInput
                  placeholder="Email address"
                  placeholderTextColor={Colors.grey}
                  style={styles.textInput}
                  onChangeText={(e) => setEmail(e.trim())}
                  autoCapitalize="none"
                  returnKeyType={"done"}
                />
              </View>
        </View>
      </ScrollView>
</KeyboardAvoidingView>

Answer 4

它对我有用的方式是使用位置作为行为，使用 -70 作为垂直偏移。当键盘弹出时，任何非负整数都会创建一个巨大的未使用空间。

<KeyboardAvoidingView
    style={styles.container}
    behavior={Platform.OS === 'ios' ? 'position' : 'height'}
    keyboardVerticalOffset={Platform.OS === 'ios' ? -70 : 70}
    enabled>
     <ScrollView>
       ...
     </ScrollView>
</KeyboardAvoidingView>