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”，它会按预期变好，但我对“填充”行为不感兴趣。

Answer 1

希望这是你的期望。

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';

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

        return (
            <ScrollView >
                <KeyboardAvoidingView
                    behavior="position"
                    style={{
                        flex: 1,
                        paddingTop: 50
                    }}>
                    <Input
                        value={email}
                        placeholder={'Email'}
                    />
                    <Input
                        value={password}
                        placeholder={'Password'}
                    />
                </KeyboardAvoidingView>
            </ScrollView>
        );
    }
}

这是世博小吃https://snack.expo.io/rkPA0C00f

Answer 2

最终我厌倦了尝试让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。

当包含一个View时，KeyboardAvoidingView会折叠所有内部组件

2 个答案: