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

【问题标题】：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>

【问题讨论】：

标签： android react-native tpkeyboardavoiding

【解决方案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

【讨论】：