javascript - KeyboardAvoidingView 在包含一个 View 时折叠所有内部组件

Question

当使用具有behavior =“position”属性的KeyboardAvoidingView时，如果该KeyboardAvoidingView组件包含一个包含多个项目的View，则所有内部组件都会一个接一个地折叠，就好像所有内部组件的flex == 0一样:

Example 1

这里是一个例子(Input是一个基于TextInput的react-native-elements组件):

return (
  <KeyboardAvoidingView
    behavior="position"
    style={{
      flex: 1
    }}
  >
    <View style={{ flex: 1, paddingTop: 50 }}>
      <Input
        value={email}
        keyboardAppearance="light"
        autoFocus={false}
        autoCapitalize="none"
        autoCorrect={false}
        keyboardType="email-address"
        returnKeyType="next"
        placeholder={"Email"}
        containerStyle={{
          marginLeft: 10
        }}
        errorMessage={
          !isEmailValid
            ? "Please enter a valid email address"
            : undefined
        }
      />
      <Input
        value={password}
        keyboardAppearance="light"
        autoCapitalize="none"
        autoCorrect={false}
        secureTextEntry={true}
        returnKeyType={"done"}
        blurOnSubmit={true}
        containerStyle={{
          marginLeft: 10
        }}
        placeholder={"Password"}
        errorMessage={
          isEmailValid && !isPasswordValid
            ? "Please enter at least 8 characters"
            : undefined
        }
      />
    </View>
  </KeyboardAvoidingView>)

如果我将属性更改为behavior="padding"，它会按预期正常运行，但我对“padding”行为不感兴趣。

Answer 1

最终，我厌倦了尝试让 KeyboardAvoidingView 按预期工作，并且我能够使用 react-native-keyboard-aware-scroll-view 实现我需要的东西。这是一个简单而强大的库。

这是一个代码示例:

import React, { Component } from 'react';
import {
    Text,
    View,
    StyleSheet,
    KeyboardAvoidingView,
    TextInput,
    ScrollView
} from 'react-native';
import { Constants } from 'expo';
import { Input } from 'react-native-elements';
import { KeyboardAwareScrollView } from 'react-native-keyboard-aware-scroll-view';

export default class App extends Component {
    render() {
        const email = '';
        const password = '';

        return (
                <KeyboardAwareScrollView 
                    style={{
                        flex: 1
                    }}
                    scrollEnabled={false}>
                    <Input
                        value={email}
                        placeholder={'Email'}
                    />
                    <Input
                        value={password}
                        placeholder={'Password'}
                    />
                </KeyboardAwareScrollView>
        );
    }
}

感谢您的帮助Aung Myat Hein .