我有我的代码设置:
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>
);
}
}
我基本上想要native-base的Content组件来避免使用键盘 . 我在顶部有我的标识,它下方的标语和屏幕底部的形状通过给出一些绝对的定位 . 此时,内容组件向上移动我不想要的屏幕 . 我想要的是标志和标语停留在屏幕的顶部,但页面底部的形式;向上移动
Here's what I've researched so far:
-
发现实际上有一个来自本地的名为KeyboardAvoidingView的反应组件,我玩了它,但保留了LogoAvoidingView内的Logo,背景图像和其他内容,使得所有内容都没有显示在屏幕上 .
-
后来我发现本机基本组件'Content'本身扩展了KeyboardAvoidingView,因此首先不需要使用它 . 但我不认为KeyboardAvoidingView正在使用我的本机和本机基础版本 .
-
所以最后,我决定这是一个bug,我会使用react native的Keyboard模块代替做一些自定义工作,这就是我现在所处的代码方式 .
The Question
在_keyboardDidShow和_keyboardDidHide内部的控制台正在运行,这意味着现在我只需要知道如何在keyboardDidShow和keyboardDidHide上更改组件的样式 . 当然,任何帮助表示赞赏!我真的很反应原生,所以任何改善我的工作流程的建议都会得到认真对待 .
1 回答
我已经偶然发现了同样的问题!我建议您将键盘宽度保存在状态,例如:
然后,拥有此高度,您可以使您的UI依赖于该值 . 确保它正常工作后,为了不在位置之间跳转,使用Animated在位置之间进行无缝转换 . 希望这可以帮助!