Question

我想获取textInputs而不用键盘遮盖。

我曾尝试使用keyboardAvoidingView，但仅在Android中支持。

<KeyboardAvoidingView>
    <SafeAreaView keyboardShouldPersistTaps={'handled'}>
       <View style={styles.middleView}>
          <Text>Login</Text>
          <TextInput
             placeholder="example@google.com"
             placeholderTextColor="#a4b0be"
             returnKeyType="go"
             keyboardType="email-address"
             autoCapitalize="none"
             autoCorrect={false}
             autoFocus={true}
          />
          <TouchableOpacity>
             <Text style=Login</Text>
          </TouchableOpacity>
       </View>
    </SafeAreaView>
</KeyboardAvoidingView>

我该如何解决。还有其他图书馆吗？

Answer 1

KeyboardAvoidingView在iOS和Android上的行为有所不同。在iOS上，建议添加行为道具，并且我通常使用“填充”，在大多数情况下效果很好：

<KeyboardAvoidingView
  behavior={Platform.OS === 'ios' ? 'padding' : undefined}
>

Answer 2

安装React Native键盘垫片，

npm install --save react-native-keyboard-spacer

您可以将其用于iOS应用程序。 KeyboardAoidingView在Android中完美运行。因此，仅将此库应用于iOS平台。

import KeyboardSpacer from 'react-native-keyboard-spacer';

{Platform.OS === 'android' && 
     <KeyboardAvoidingView>
          <SafeAreaView keyboardShouldPersistTaps={'handled'}>
              <View style={styles.middleView}>
                   <Text>Login</Text>
                   <TextInput
                       placeholder="example@google.com"
                       placeholderTextColor="#a4b0be"
                       returnKeyType="go"
                       keyboardType="email-address"
                       autoCapitalize="none"
                       autoCorrect={false}
                       autoFocus={true}
                   />
                   <TouchableOpacity>
                        <Text style=Login</Text>
                   </TouchableOpacity>
             </View>
         </SafeAreaView>
    </KeyboardAvoidingView>
}
{Platform.OS === 'iOS' && 
     <SafeAreaView keyboardShouldPersistTaps={'handled'}>
         <View style={styles.middleView}>
             <Text>Login</Text>
             <TextInput
                  placeholder="example@google.com"
                  placeholderTextColor="#a4b0be"
                  returnKeyType="go"
                  keyboardType="email-address"
                  autoCapitalize="none"
                  autoCorrect={false}
                  autoFocus={true}
             />
             <TouchableOpacity>
                  <Text style=Login</Text>
             </TouchableOpacity>
         </View>
         <KeyboardSpacer/>
     </SafeAreaView>         
}

Answer 3

要解决iPhone和Android中的键盘问题，建议您使用很棒的软件包

https://github.com/APSL/react-native-keyboard-aware-scroll-view

IOS设备不支持KeyboardAvoidingView

3 个答案: