[英]In My react-native code the keyboardavoiding view is not working
I am in troubling.我在烦恼。 In my code the keyboardavoiding view is not working.
在我的代码中,避免键盘的视图不起作用。 I am use the keyboard avoiding view but when i am filling confirm password then the textInput will be back of the keyboard and not showing.
我正在使用键盘避免查看,但是当我填写确认密码时,textInput 将位于键盘的背面并且不显示。 please suggest me better answer for my code.my code is:-
请为我的代码建议更好的答案。我的代码是:-
<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>
I recommend you don't use the KeyboardAvoidingView
for Android
at all, The default keyboard behaviour in Android is good enough.我建议你根本不要使用
Android
的KeyboardAvoidingView
, Android
中的默认键盘行为已经足够好了。
Here is an example of how to do it:以下是如何执行此操作的示例:
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>
);
}
A shorter solution that may also work for you is to not set the behavior
property for Android
.一个可能也适用于您的更简短的解决方案是不为
Android
设置behavior
属性。 Set it only for iOS
:仅为
iOS
设置:
import { Platform } from 'react-native';
...
render() {
return (
<View>
<KeyboardAvoidingView behavior={Platform.OS === 'android' ? '' : 'padding'} enabled>
...
</KeyboardAvoidingView>
</View>
);
}
This is from the official docs regarding the behavior
property of the KeyboardAvoidingView
:这是来自关于
KeyboardAvoidingView
的behavior
属性的官方文档:
Android and iOS both interact with this prop differently.
Android 和 iOS 都以不同的方式与这个道具交互。 Android may behave better when given no behavior prop at all, whereas iOS is the opposite.
当完全没有行为道具时,Android 可能表现得更好,而 iOS 则相反。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.