如何防止 React Native SafeAreaView 中的底部区域与内容重叠？

Question

我正在我的 React Native 应用程序上实现

<SafeAreaView>

。我的大部分屏幕都在 ScrollView 中。当我添加

<SafeAreaView>

时，它会遮挡内容。虽然我希望这个底部区域是“安全的”，但我希望用户能够看到其后面的内容，否则，空间就被浪费了。

如何实现“透明”的安全区域？

简化示例：

class ExampleScreen extends Component {
  render() {
    return (
      <SafeAreaView>
        <Scrollview>
          <Text>Example</Text>
          <Text>Example</Text>
          <Text>Example</Text>
          (etc)
        </Scrollview>
      </SafeAreaView>
    );
  }
}

输出：

所需输出：

Answer 1

大多数情况下，您不希望您的

ScrollView/FlatList

作为

SafeAreaView

的后代。相反，您只想将

Header

和

TabBar

包装成

SafeAreaView

。一些例子：

而不是这个（错误的例子）

<SafeAreaView>
  <Header />
  <ScrollView>
     <Content />
  </ScrollView>
</SafeAreaView>

你只包装标题

<View>
   <SafeAreaView>
      <Header />
   </SafeAreaView>
   <ScrollView>
     <Content />
   </ScrollView>
</View>

即使你没有真正的标题，你只是想避免在状态栏后面绘制，你可以使用

SafeAreaView

作为填充。

<View>
   <SafeAreaView /> // <- Now anything after this gonna be rendered after the safe zone
   <Content />
</View>

Answer 2

也许这个答案很晚，但你可以轻松使用

 class ExampleScreen extends Component {
  render() {
    return (
      <SafeAreaView edges={['right', 'left', 'top']} >
        <Scrollview>
          <Text>Example</Text>
          <Text>Example</Text>
          <Text>Example</Text>
          (etc)
        </Scrollview>
      </SafeAreaView>
    );
  }
}

Answer 3

你可以尝试react-navigation的SafeAreaView。只需将其

forceInset

属性设置为

{ bottom: 'never' }

，您就会看到它的行为符合您的期望。

示例：https://github.com/react-navigation/react-navigation/blob/master/examples/SafeAreaExample/App.js

Answer 4

<>
 <SafeAreaView style={{ paddingTop: Platform.OS === 'android' ? 20 : 0 }} />
  <ScrollView>
   <View>
    <Text>Text</Text>
   </View>
  </ScrollView>
</>

Answer 5

在

ScrollView

中，

contentInsetAdjustmentBehavior

控制插入此安全区域填充。只需将其设置为

automatic

<KeyboardAwareScrollView
  contentInsetAdjustmentBehavior="automatic"
  {...otherProps}
/>

---

文档：

/**
 * This property specifies how the safe area insets are used to modify the content area of the scroll view.
 * The default value of this property must be 'automatic'. But the default value is 'never' until [email protected].
 */
contentInsetAdjustmentBehavior?: 'automatic' | 'scrollableAxes' | 'never' | 'always';

嗯，即使在 0.64 上我也必须手动设置。不管是怎么回事。

Answer 6

安装：

npm i react-native-safe-area-context react-native-safe-area-view

之后编写这样的代码：

import { SafeAreaProvider } from 'react-native-safe-area-context';
import SafeAreaView from 'react-native-safe-area-view';

  <SafeAreaProvider>
    <SafeAreaView style={{ flex: 1 }}
      forceInset={{ top: 'always', bottom: 'never' }}
    >
      {/* ... your code here */}
    </SafeAreaView>
  </SafeAreaProvider>

Answer 7

<ScrollView contentInsetAdjustmentBehavior="never">
  ...
</ScrollView>

在scrollView中使用它