[英]Change the position of a Component on keyboard did show - KeyboardAvoidingView not working - [React Native]
I have my code setup as such: 我有这样的代码设置:
export default class HomeScreen extends Component {
constructor() {
super();
}
componentDidMount () {
this.keyboardDidShowListener = Keyboard.addListener('keyboardDidShow', this._keyboardDidShow);
this.keyboardDidHideListener = Keyboard.addListener('keyboardDidHide', this._keyboardDidHide);
}
_keyboardDidShow = () => {
console.log('keyboard did show')
}
_keyboardDidHide = () => {
console.log('keyboard did hide')
}
render() {
return (
<Container styles={styles.container} >
<Content styles={styles.content} contentContainerStyle={marginLeft=this.state.marginLeft}>
<Image
style={styles.bgImg}
source={Images.bgImg}
>
</Image>
<Image
style={styles.logo}
source={Images.logo}
>
</Image>
<Text style={styles.slogan}>This is the title</Text>
<Form style={styles.search_form}>
<Item rounded floatingLabel style={styles.search}>
<Label style={styles.search_label}>Where are you headed?</Label>
<Input style={styles.search_input} />
<Button full rounded style={styles.search_btn}>
<Icon name="search"></Icon>
</Button>
</Item>
</Form>
</Content>
</Container>
);
}
}
I want basically the Content component of native-base to avoid the keyboard. 我基本上希望Native-base的Content组件避免键盘。 I have my logo at the top, the slogan below it and the form at the bottom of the screen by giving some absolute positioning.
通过给出一些绝对的位置,我在顶部有徽标,在其下方有标语,在屏幕底部有表格。 At this point, the content component moves way up the screen which I don't want.
此时,内容组件将在屏幕上向上移动,这是我所不希望的。 What I want is the logo and the slogan staying right at the top of the screen but the form which is at the bottom of the page;
我想要的是徽标和标语位于屏幕顶部,而表单位于页面底部; to move up.
向上移动。
Here's what I've researched so far: 到目前为止,这是我研究的内容:
The Question 问题
The console logging inside _keyboardDidShow and _keyboardDidHide are working, which means now I just need to know how to change the style of a component on keyboardDidShow and keyboardDidHide. _keyboardDidShow和_keyboardDidHide内部的控制台日志正在运行,这意味着现在我只需要知道如何更改keyboardDidShow和keyboardDidHide上组件的样式。 Any help is appreciated, of course!
感谢您的任何帮助! I'm really new to react native so any suggestions to better improve my workflow will be taken seriously.
我真的是新来的本地人,所以认真考虑任何改善我的工作流程的建议。
I have already stumbled across the same problem! 我已经偶然发现了同样的问题! I'd recommend you save the keyboard width on state, with, for example:
我建议您使用状态保存键盘宽度,例如:
keyboardDidShow = e => this.setState(p => ({ ...p, height: e.endCoordinates.height })
keyboardDidHide = () => this.setState(p => ({ ...p, height: 0 })
then, having this height, you can make your UI depend on that value. 然后,有了这个高度,您就可以使UI依赖于该值。 After you make sure that is working, in order for it not to jump between positions, use Animated to have a seamless transition between the positions.
确保该设置有效后,为了不使其在位置之间跳转,请使用Animated在位置之间进行无缝过渡。 Hope this helps!
希望这可以帮助!
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.