[英]Keyboard blocking textinput with Scrollview and KeyboardAvoidingView in react native
I am using RN 0.55.4 + Expo 我正在使用RN 0.55.4 + Expo
I tried to use KeyboardAvoidingView
to my form but it doesnt change anything with or without KeyboardAvoidingView
, its still blocking my form. 我尝试对我的窗体使用
KeyboardAvoidingView
,但是无论是否带有KeyboardAvoidingView
,它都不会更改任何内容,它仍然会阻塞我的窗体。 I am using tcomb-form 我正在使用tcomb形式
This is my current code 这是我当前的代码
return (
<View style={styles.container}>
<KeyboardAvoidingView>
<ScrollView>
<View>
<Header/>
<View style={styles.inputs}>
<LoginForm
formType={formType}
form={this.props.auth.form}
value={this.state.value}
onChange={self.onChange.bind(self)}/>
{passwordCheckbox}
</View>
<FormButton/>
<View >
<View style={styles.forgotContainer}>
{leftMessage}
{rightMessage}
</View>
</View>
</View>
</ScrollView>
</KeyboardAvoidingView>
</View>
)
This is the style 这是风格
var styles = StyleSheet.create({
container: {
flexDirection: 'column',
flex: 1
},
inputs: {
marginTop: 10,
marginBottom: 10,
marginLeft: 10,
marginRight: 10
},
forgotContainer: {
flexDirection: 'row',
justifyContent: 'space-between',
marginTop: 10,
marginLeft: 10,
marginRight: 10
}
})
This is the display 这是显示
I also tried https://github.com/APSL/react-native-keyboard-aware-scroll-view library but still same result, keyboard is blocking the view / form.
我还尝试了https://github.com/APSL/react-native-keyboard-aware-scroll-view库,但结果仍然相同,键盘阻塞了视图/窗体。 Anyone know whats wrong?
有人知道怎么了吗?
For iOS you should set the "behavior" parameter of the KeyboardAvoidingView to "padding" : 对于iOS,您应该将KeyboardAvoidingView的“ behavior”参数设置为“ padding”:
<KeyboardAvoidingView behavior="padding">
Refering to react-native documentation : 请参阅本机文档 :
Note: 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则相反。
A working example on iOS and Android : iOS和Android上的工作示例:
<KeyboardAvoidingView behavior={Platform.OS == "ios" ? "padding" : null}>
It also happened to me... ScrollView and FlatList can work it out by setting a dynamic height depending on your data to FlatList. 我也碰到了... ScrollView和FlatList可以通过根据FlatList的数据设置动态高度来解决问题。 eg:
例如:
<ScrollView>
<FlatList style={{height: dataArr.length * YourInputHeight}}
...
/>
</ScrollView>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.