代码之家  ›  专栏  ›  技术社区  ›  TheFlyBiker 420

更改键盘上某个组件的位置时显示-键盘避免视图不工作-[本地反应]

  •  0
  • TheFlyBiker 420  · 技术社区  · 6 年前

    我的代码设置如下:

    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>
        );
      }
    }
    

    我希望基本上本地基的内容组件避免使用键盘。我有我的标志在顶部,下面的口号和屏幕底部的形式给一些绝对的定位。在这一点上,内容组件向上移动,这是我不想要的。我想要的是标志和标语保持在屏幕的顶部,而不是页面底部的形式;向上移动。

    以下是我目前所研究的:

    • 后来我发现本机基本组件“Content”本身扩展了KeyboardAvoidingView,所以一开始就不需要使用它。但我不认为KeyboardAvoidingView是在使用我的react native和native base版本。
    • 所以最后,我决定这是一个bug,我将使用react native的键盘模块来做一些自定义工作,这就是我现在所处的位置,代码方面。

    keyboardDidShow和keyboardDidHide中的控制台日志正在工作,这意味着现在我只需要知道如何更改keyboardDidShow和keyboardDidHide上组件的样式。当然,任何帮助都是值得感谢的! 我真的是新来的反应本机,所以任何建议,以更好地改善我的工作流程将被认真对待。

    1 回复  |  直到 6 年前
        1
  •  1
  •   Filipe    6 年前

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

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

    然后,有了这个高度,您就可以使您的UI依赖于该值。在你确定这是工作,为了使它不跳之间的立场,使用动画有一个无缝的过渡之间的立场。希望这有帮助!