如何在全屏模式下使用 KeyboardAvoidingView？答案

【问题标题】：How to use KeyboardAvoidingView in full screen mode?如何在全屏模式下使用 KeyboardAvoidingView？
【发布时间】：2018-11-27 10:45:25
【问题描述】：

上面的黄色区域是Textarea 和一个预计会一直粘在屏幕底部的按钮面板。但是，当用户尝试键入时，键盘会阻止视图，如下所示

我已经实现了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' }
});

【问题讨论】：

您是否尝试过使用带有 flexGrow 的滚动视图？
生成点心...
@RaajNadar：请看snack.expo.io/HyMPYDjR7
@SamithaNanayakkara：我不确定如何为我的案例实现滚动视图，因为我不是呈现项目列表，而是呈现 Textarea 组件。如果可以请看一下我的小吃：snack.expo.io/HyMPYDjR7

标签： react-native native-base

【解决方案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>

【讨论】：