react-native - 如何在全屏模式下使用 KeyboardAvoidingView？

Question

上面的黄色区域是 Textarea 和一个按钮面板，预计会始终粘在屏幕底部。然而，当用户尝试输入时，键盘将阻止 View ，如下所示

我已经实现了 KeyboardAvoidingView 但它未能使按钮出现在键盘上方。

我的代码如下:

  <KeyboardAvoidingView behavior="padding" style={{ flex: 1 }}>
    <Container style={Styles.containerStyle}>
      <Textarea 
        autoCapitalize="none"
        autoCorrect={false}
        style={Styles.textAreaStyle}
      />
      <View style={Styles.buttonPanelStyle}>
        <Button style={Styles.buttonStyle}><Text>CANCEL</Text></Button>
        <Button style={Styles.buttonStyle}><Text>SAVE</Text></Button>
      </View>
    </Container>
  </KeyboardAvoidingView>


const Styles = StyleSheet.create({
  containerStyle: { backgroundColor: 'green' },
  textAreaStyle: { backgroundColor: 'yellow', flex: 1 },
  buttonPanelStyle: { backgroundColor: 'red', flexDirection: 'row' },
  buttonStyle: { flex: 1, justifyContent: 'center' }
});

Answer 1

我找到了解决它的方法。用额外的 View 包装 KeyboardAvoidingView，并实现 onLayout 以重新计算屏幕的高度。示例代码如下:

const { height: fullHeight } = Dimensions.get('window');

onLayout = ({
  nativeEvent: { layout: { height } },
}) => {
  const offset = fullHeight - height;
  this.setState({ offset });
}

<View style={{ flex: 1 }} onLayout={this.onLayout}>
  <KeyboardAvoidingView behavior="padding" style={{ flex: 1 }} keyboardVerticalOffset={this.state.offset}>
    ...
  </KeyboardAvoidingView>
</View>