Question

我目前正在使用React Native Expo，但无法在我的主容器中修复缺口填充。我正在使用以下CSS确定paddingTop：

flex: 1,
paddingTop: Platform.OS === "android" ? StatusBar.currentHeight : 0

在该容器中，我有一个用KeyboardAvoidingView包装的输入。它具有以下样式：

<KeyboardAvoidingView
   style={{ flex: 1 }}
   behavior="padding"
>
   ....
   <Input />
</KeyboardAvoidingView>

将paddingTop应用于主容器时，它将输入推入键盘下方（后面）。当应用KeyboardAvoidingView时，是否可以减去paddingTop？我试图从主容器的高度中减去paddingTop，但这没用。

编辑：这是代码的概述：

<Container style={SafeViewAndroid.AndroidSafeArea}>
   <KeyboardAvoidingView
      style={{ flex: 1 }}
      behavior="padding"
   >
      ....
      <Input />
   </KeyboardAvoidingView>
</Container>

<Container>来自NativeBase。我的paddingTop在容器样式中。

Answer 1

您可以使用status值删除height。

// paddingTop: Platform.OS === "android" ? this.state.height : 0
this.state={
  height : StatusBar.currentHeight
}
...

inputfocus = () => {
  this.setState({
     height : 0
  });
}

onEndEditing = () => {
  this.setState({
     height : StatusBar.currentHeight
  });
}
...
<Input 
onFocus={this.inputfocus}
onEndEditing={this.onEndEditing} // To return to the original height
/>

将KeyboardAvoidingView与主容器上的填充一起使用

1 个答案: