Question

我的代码设置如下：

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组件避免键盘。通过给出一些绝对的位置，我在顶部有徽标，在其下方有标语，在屏幕底部有表格。此时，内容组件将在屏幕上向上移动，这是我所不希望的。我想要的是徽标和标语位于屏幕顶部，而表单位于页面底部；向上移动。

这是我到目前为止研究的内容：

发现React本机中实际上有一个名为KeyboardAvoidingView的组件，我试用了它，但将徽标，背景图像和其余内容保留在KeyboardAvoidingView内，使得所有内容均未显示在屏幕上。 li>
后来我发现本地基础组件“ Content”本身扩展了KeyboardAvoidingView，因此一开始就不需要使用它。但我认为KeyboardAvoidingView不能与我的react native和native base版本一起使用。
所以最后，我确定这是一个错误，我将使用react native的Keyboard模块来执行一些自定义工作，这是我现在在代码方面的工作。

问题

_keyboardDidShow和_keyboardDidHide内部的控制台日志正在运行，这意味着现在我只需要知道如何更改keyboardDidShow和keyboardDidHide上组件的样式。感谢您的任何帮助！我真的是新来的本地人，所以认真考虑任何改善我的工作流程的建议。

Answer 1

我已经偶然发现了相同的问题！我建议您使用状态保存键盘宽度，例如：

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

然后，有了这个高度，您可以使UI依赖于该值。确保该设置有效后，为了不使其在位置之间跳转，请使用Animated在位置之间进行无缝过渡。希望这会有所帮助！

更改了键盘上确实显示的组件的位置-KeyboardAvoidingView不起作用-[React Native]

1 个答案: