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

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 组件避开键盘。我的标志在顶部，标语在它下面，表格在屏幕底部，通过一些绝对定位。此时，内容组件在我不想要的屏幕上移动。我想要的是位于屏幕顶部的徽标和标语，但页面底部的表单；向上移动。

这是我目前研究的内容：

发现实际上有一个名为 KeyboardAvoidingView 的 react native 组件，我试了一下它，但是将徽标、背景图像和其余内容保留在 KeyboardAvoidingView 中使得所有内容都不会显示在屏幕上。
后来发现原生基础组件'Content'本身就是扩展了KeyboardAvoidingView，所以一开始就没必要用。但我不认为 KeyboardAvoidingView 与我的 react native 和 native base 版本一起工作。
所以最后，我决定这是一个错误，我会使用 React Native 的键盘模块来代替做一些自定义工作，这就是我现在在代码方面的位置。

问题

_keyboardDidShow 和 _keyboardDidHide 中的控制台日志正在运行，这意味着现在我只需要知道如何更改 keyboardDidShow 和 keyboardDidHide 上的组件的样式。当然，我们将不胜感激！我真的是 React Native 的新手，所以任何可以更好地改进我的工作流程的建议都会得到认真对待。

Answer 1

我已经遇到了同样的问题！我建议您在状态下保存键盘宽度，例如：

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

然后，有了这个高度，你就可以让你的 UI 依赖于那个值。确保它正常工作后，为了使其不在位置之间跳转，请使用 Animated 在位置之间进行无缝过渡。希望这对您有所帮助！

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

Change the position of a Component on keyboard did show - KeyboardAvoidingView not working - [React Native]

android

react-native

native-base