KeboardAvoidingView 不适用于独立应用程序 [React Native Expo]答案

【问题标题】：KeboardAvoidingView not working on standalone app [React Native Expo]KeboardAvoidingView 不适用于独立应用程序 [React Native Expo]
【发布时间】：2020-07-30 14:31:04
【问题描述】：

KeyBoardAvoidingView 在 expo 测试中工作正常，但是当我构建一个独立的应用程序时它根本不起作用。

PS：我正在使用反应导航，但标题设置为 null。

KeyBoardAvoidingView 使用代码

   <KeyboardAvoidingView  behavior='padding'>
              <TextInput style={styles.formTextInput}
                onChangeText={this.emailOnChange}
                value={this.state.email}
                placeholder={'Email...'}
                onSubmitEditing={() => { this.secondTextInput.focus(); }}
                blurOnSubmit={false}
                autoCapitalize='none'
                returnKeyType='next'
                keyboardType='email-address'
              />
              <TextInput style={styles.formTextInput}
                onChangeText={this.passwordOnChange}
                value={this.state.password}
                ref={(input) => { this.secondTextInput = input; }}
                password={true}
                secureTextEntry={true}
                placeholder={'Password...'}
                maxLength={20}
                autoCapitalize='none'
              />
            </KeyboardAvoidingView>

【问题讨论】：

我可以指出的一件事是您没有在键盘上设置 flex 避免填充行为在 android 上也不能很好地发挥作用，您需要将其调整为特定于平台。

标签： react-native jsx

【解决方案1】：

你可以试试这个，

import {
    View,
    KeyboardAvoidingView,
    ScrollView,
    Platform,
  } from "react-native";
  
<View style={{ flex: 1 }}>
  <KeyboardAvoidingView
    behavior={Platform.OS === "ios" ? "padding" : null}
    style={{ flex: 1 }}
    enabled
  >
    <ScrollView keyboardShouldPersistTaps="always">
      <EmailField />
      <PasswordField />
    </ScrollView>
  </KeyboardAvoidingView>
</View>

自定义您的文本输入

【讨论】：