在我的本机代码中，键盘避免视图不起作用

Posted 2023-03-16

【中文标题】在我的本机代码中，键盘避免视图不起作用

【英文标题】：In My react-native code the keyboardavoiding view is not working

【发布时间】：2019-01-22 11:18:45

【问题描述】：

我很麻烦。在我的代码中，键盘避免视图不起作用。我正在使用键盘避免视图，但是当我填写确认密码时，textInput 将在键盘后面并且不显示。请为我的代码建议我更好的答案。我的代码是：-

<SafeAreaView style= flex: 1 >
    <View>
        <View>
            <Image source=require('../img/LykaLogo.png') style= width: 100, height: 100  />

        </View>
    </View>
    <View >
    <KeyboardAvoidingView behavior='padding'>
        <View>
            <Text style=fontSize:15,>CREATE USER ACCOUNT</Text>
        </View>
        <View >
        <View >
        <TextInput
                placeholder='FULL NAME'
                inputStyle=fontSize:15               
            />
        </View>
        <View >
        <TextInput
                placeholder='USERNAME'
                inputStyle=fontSize:15               
            />
        </View>
        <View >
        <TextInput
                placeholder='EMAIL'
                inputStyle=fontSize:15               
            />
        </View>
        <View >
        <TextInput
                placeholder='PHONE'
                inputStyle=fontSize:15               
            />
        </View>
        <View >
        <TextInput
                placeholder='PASSWORD'
                inputStyle=fontSize:15               
            />
        </View>
        <View>
        <TextInput
                placeholder='CONFIRM  PASSWORD'
                inputStyle=fontSize:15               
            />
        </View>
        </View>
        </KeyboardAvoidingView>
    </View>
</SafeAreaView>

【参考方案1】：

我建议你根本不要使用KeyboardAvoidingView 代替android，Android 中的默认键盘行为已经足够好了。

下面是一个例子：

import  Platform  from 'react-native';

...

renderContent() 
  return (
    <View>
      ...
    </View>
  )


render() 
  return (
    <View>
      Platform.OS === 'android' ? this.renderContent() :
        <KeyboardAvoidingView behavior='padding' enabled>
          this.renderContent()
        </KeyboardAvoidingView>
    </View>
  );

也可以为您工作的更短的解决方案是不为Android 设置behavior 属性。仅为ios设置：

import  Platform  from 'react-native';

...

render() 
  return (
    <View>
      <KeyboardAvoidingView behavior=Platform.OS === 'android' ? '' : 'padding' enabled>
        ...
      </KeyboardAvoidingView>
    </View>
  );
 

这是来自关于KeyboardAvoidingView 的behavior 属性的官方文档：

Android 和 iOS 与此道具的交互方式不同。 Android 可能在没有任何行为属性的情况下表现得更好，而 iOS 则相反。

Source