首页 文章

更改键盘上组件的位置确实显示 - KeyboardAvoidingView无法正常工作 - [React Native]

提问于
浏览
0

我有我的代码设置:

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 回答

  • 1

    我已经偶然发现了同样的问题!我建议您将键盘宽度保存在状态,例如:

    keyboardDidShow = e => this.setState(p => ({ ...p, height: e.endCoordinates.height })
    keyboardDidHide = () => this.setState(p => ({ ...p, height: 0 })
    

    然后,拥有此高度,您可以使您的UI依赖于该值 . 确保它正常工作后,为了不在位置之间跳转,使用Animated在位置之间进行无缝转换 . 希望这可以帮助!

相关问题