我很麻烦。在我的代码中,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>
答案 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则相反。