相关疑难解决方法(0)

我在我的应用程序中使用React-Navigation,该应用程序包含多个屏幕的StackNavigator,其中一些屏幕具有TextInput, autoFocus={true}

问题:在组件渲染时在这些屏幕上,屏幕的高度在构造函数中设置:

constructor(props) {
    super(props);
    this.state = { 
        height: Dimensions.get('window').height,
    };
}

但是,由于autoFocusTextInput是true,因此在渲染后,屏幕上的键盘几乎立即弹出,导致组件重新渲染,因为在componentWillMount中添加到Keyboard的eventListener:

 componentWillMount() {
    this.keyboardWillShowListener = Keyboard.addListener(
        "keyboardWillShow",
        this.keyboardWillShow.bind(this)
    );
}

keyboardWillShow(e) {
    this.setState({
        height:
            Dimensions.get("window").height * 0.9 - e.endCoordinates.height
    });
    LayoutAnimation.configureNext(LayoutAnimation.Presets.easeInEaseOut);
}

这会影响性能,我希望避免不必要的重新渲染.

问题:
1.是否可以在React-Navigation的ScreenProps中设置键盘的动态高度(取决于设备)？
2. React-Navigation的state.params是否可以这样做？
3.除了应用KeyboardAvoidingView或此模块之外,还有其他方法可以解决此问题吗？

我似乎无法使用键盘在我的 React-Native Expo 应用程序中推送内容。我正在通过从我的开发机器发布它来从 expo 应用程序测试它。

尽我所能，当键盘成为焦点时，似乎没有任何东西可以将视图向上推，是否有特定的组件顺序，或者我缺少某些属性；我已经包含了我认为相关的版本、渲染块和样式块。

我正在使用以下版本（最新）；

"expo": "^29.0.0",
"react": "16.3.1",
"react-native": "https://github.com/expo/react-native/archive/sdk-29.0.0.tar.gz",

对于登录页面，渲染代码如下所示；

 render() {
    return (
      <SafeAreaView style={styles.flexContainer}>
      <KeyboardAvoidingView
        style={styles.flexContainer}
        behavior="padding"
      >
        <Image style={styles.image} source={require('../../assets/images/backgroundWelcome.png')} role="presentation" />
        <View style={styles.container}>
          <View style={[styles.row, styles.border]}>
            <TextInput 
              placeholder='Email' 
              style={styles.input} 
              onChangeText={(input) => this.setState({email: input})} 
              value={this.state.email} 
            />
          </View>
          <View style={[styles.row, styles.border]}>
            <TextInput 
              placeholder='Password'
              style={styles.input}
              secureTextEntry={true}
              onChangeText={(input) => this.setState({password: input})}
              value={this.state.password} 
            />
          </View>

          <View style={styles.row}>
            <StyledButton callback={this.handleLogin} title='Log In'/>
          </View>

        </View>
      </KeyboardAvoidingView>
      </SafeAreaView>
    )
  }

这些是相关的样式；

  root: {
    flex: 1,
    alignItems: 'center',
    backgroundColor: '#fff', …