在我的本机代码中,keyboardavoiding视图不起作用

时间:2019-01-22 11:18:46

标签: android react-native tpkeyboardavoiding

我很麻烦。在我的代码中,keyboardavoiding视图不起作用。我正在使用键盘避开视图,但是当我填写确认密码时,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 个答案:

答案 0 :(得分: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>
  );
}

一个更可行的解决方案是不为behavior设置Android属性。仅将其设置为iOS

import { Platform } from 'react-native';

...

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

这是有关behavior的{​​{1}}属性的官方文档:

  

Android和iOS与该道具的交互方式不同。如果完全不提供行为支持,Android可能会表现更好,而iOS则相反。

Source