标签: safeareaview

在 iPhone X 模拟器上运行应用程序时，Material Top Tab Navigator 切入凹槽和底部按钮。

为了解决这个问题，我尝试在应用 App Container 之前实现 SafeAreaView，并将每个单独的屏幕包装在 SafeAreaViews 中。这可以使文本远离这些区域，而不是导航器。

import React, { Component } from 'react';
import { Text, View } from 'react-native';
import { createAppContainer, createMaterialTopTabNavigator, SafeAreaView } from 'react-navigation';

class Calculator extends Component {
  render() {
    return (
      <View style={{ flex: 1, justifyContent: 'center', alignItems: 'center' }}>
        <Text>Calculator!</Text>
      </View>
    );
  }
}

class Camera extends Component {
  render() {
    return (
      <View style={{ flex: 1, justifyContent: 'center', alignItems: 'center' }}>
        <Text>Camera!</Text>
      </View> …

我使用 react native 创建一个移动应用程序。我使用 KeyboardAvoidingView、SafeAreaView 和 ScrollView 处理屏幕中的键盘位置。我使用这个命令来管理键盘位置：

<KeyboardAvoidingView style={{ flex: 1 }} behavior="padding" enabled>
        <SafeAreaView>
          <ScrollView>
            <Header
              leftComponent={{
                icon: "cancel",
                color: "#fff",
                size: 30,
                onPress: () => navigate("Dashboard")
              }}
              centerComponent={{ text: "Ajouter une demande", style: { color: "#fff", fontSize: 18 } }}
              rightComponent={{
                icon: "help",
                color: "#fff",
                size: 30,
                fontWeight: "bold",
                onPress: () => Alert.alert("En cours de développement")
              }}
              backgroundColor="rgba(82, 159, 197, 1)"
              // outerContainerStyles={{ height: Platform.OS === "ios" ? 70 : 70 - 24 }}
              containerStyle={
                {
                  // …

调用的组件SafeAreaView由react-native、react-navigation、react-native-safe-area-context和react-native-safe-area-view导出。

有什么区别，我应该在哪些情况下使用哪个？

我需要放置一个<View>withposition: 'absolute'以便它可以覆盖下面的另一个视图。我不希望这在 iOS 的状态栏后面，所以我把所有东西都放在<SafeAreaView>.

不幸的是，绝对位置似乎是相对于全屏而不是其父视图（SafeAreaView）。

有诀窍吗？

const styles = StyleSheet.create({
    safeAreaView: {
      flex: 1,
    },
    map: {
      flex: 1,
    },
    userLocationButton: {
      position: 'absolute',
      right: 12,
      top: 12,
    },
  });

  return (
    <SafeAreaView style={styles.safeAreaView}>
        <ClusteredMapView style={styles.map} />
      )}
        <TouchableOpacity style={styles.userLocationButton}>
          <Image source={UserLocationButton} />
        </TouchableOpacity>
      )}
    </SafeAreaView>
  );

我知道我总是需要用来<safeAreaView>将我的内容保留在 iOS 屏幕的正确位置。

即使我只为 Android 构建一个应用程序，如果我想为 iOS 平台构建相同的应用程序，似乎使用也没有问题。<safeAreaView>

我的问题是，如果我总是用它<safeAreaView>来包装我的所有内容，我错了吗？<View>如果将来我可能必须用 替换所有内容，为什么我要使用<safeAreaView>？

我正在使用带有 SafeAreaView 的标签栏导航器。

如果我注释掉标签栏导航，父视图将覆盖整个屏幕。但是，当我添加标签栏时，它会在标签栏部分下显示一个小的白色视图。

const App = () => {
  return (
    <SafeAreaView style={styles.droidSafeArea}>
      <View style={{ backgroundColor: "red", flex: 1 }}>
        <TabNavigator key="MainTabNav" />
      </View>
    </SafeAreaView>
  );
};

export default App;

const styles = StyleSheet.create({
  droidSafeArea: {
    flex: 1,
    backgroundColor: "#2F3438",
  }
});

我有一个TableView里面的ViewController. 我TableView拉伸了 View SuperMargings（有约束）并禁用了所有SafeAreaInset 选项，但是当我运行我的项目时，我TableView仍然在SafeArea。

我怎样才能让我TableView在 iPhone 上全高带缺口？

我创建了一个带有 expo-bare-workflow 的 react native 包。我还添加了软件包，例如，

npm install --save react-navigation
npm install --save react-native-gesture-handler
npm install --save react-navigation-stack

npm install --save @react-native-community/masked-view
npm install --save react-native-safe-area-view 
npm install --save react-native-safe-area-context

npm install --save react-native-gesture-handler
npm install --save react-native-reanimated 

以下是我的 App.js 文件。

import React from 'react';
import {
  ActivityIndicator,
  AsyncStorage,
  Button,
  StatusBar,
  StyleSheet,
  Text,
  View,
} from 'react-native';
import { createSwitchNavigator, createAppContainer } from 'react-navigation';
import { createStackNavigator } from "react-navigation-stack";

class SignInScreen extends React.Component {
  static navigationOptions = {
    title: …

我试图将元素定位在屏幕的左上角（周围有一些边距）。由于 iPhone XI 上的缺口，我使用的是 SafeAreaView。不幸的是，SafeAreaView 的填充量很大，它超出了状态栏/缺口区域。因此，应该在视觉上位于角落的元素现在比其他设备上的要低得多。

我查看了 StatusBar.currentHeight，但仅支持 Android。另一种选择是使用具有参数的https://github.com/react-native-community/react-native-safe-area-viewforceInset。不幸的是，将它设置为 { top: xx } 使它像普通视图一样工作，所有设备（也包括没有缺口的设备）都有顶部填充。

我怎么能有一个 SafeAreaView 但有一个修改过的顶部填充？

从昨天开始我就一直被这个问题困扰，找不到解决办法。

我一直在尝试调整 iPhone X 中 safeArea 的颜色，对于没有选项卡的屏幕，它在顶部和底部运行良好，但是，在带有选项卡导航器的屏幕中，底部 safeArea 始终为白色，如图所示屏幕截图。有谁知道如何解决这个问题？

另外，我想问使用普通的 SafeAreaView 组件并删除 SafeAreaProvider 并删除 react-native-safe-area-context 包是否会更好，我只是将其添加为解决此问题的试用版，但我首先使用React Native 普通 SafeAreaView 组件；

在应用程序组件中：

import { SafeAreaProvider } from "react-native-safe-area-context";
          <SafeAreaProvider>
            <NavigationContainer>
              <CatNavigator />
            </NavigationContainer>
          </SafeAreaProvider>

在 CatNavigator 组件中：

const CatNavigator = () => {
  return (
    <Drawer.Navigator
      initialRouteName="Home"    >
      <Drawer.Screen
        name="Home"
        component={SettingsNavigator}
        options={{ title: "Inicio" }}
      />
    </Drawer.Navigator>

在设置选项卡导航器中：

const SettingsNavigator = () => {
  return (
    <Tab.Navigator
      screenOptions={({ route }) => ({
        tabBarIcon: ({ focused, color, size }) => {
          let …

我的 React Native 应用程序的屏幕上开始出现一些奇怪的间隙。

我简化了屏幕，因此您可以在这里看到问题：

<SafeAreaView style={{flex:1, backgroundColor: 'yellow'}}>
    <View style={{flex: 1, backgroundColor: 'green'}}>

    </View>
</SafeAreaView>

当我进入后台模式并重新打开应用程序（在 iPhone 12 上快速滑动手势）时，问题就消失了。参见示例：

当我FlatList在内部使用组件时ScrollView，我看到一条警告：

VirtualizedList 永远不应该嵌套在具有相同方向的普通 ScrollView 中 - 请改用另一个 VirtualizedList 支持的容器。

前后FlatList我使​​用了很多其他组件，而且我的屏幕很长。

我尝试用 来包装内容SafeAreaView，但它对我没有帮助，因为在这种情况下我无法滚动内容。我也尝试在 中使用ListHeaderComponent={SafeAreaView}and 。ListFooterComponent={SafeAreaView}<FlatList>

我用：

• “反应”：“16.9.0”，
• “反应本机”：“0.61.5”，

我想知道有没有什么办法可以给 iPhone X SafeArea 添加两种不同的颜色？

在React Native此可以通过增加两个固定SafeAreaView。有谁知道如何在颤振上解决这个问题？

谢谢

  @override
  Widget build(BuildContext context) {
    return Container(
      color: Colors.blue,
      child: SafeArea(
        left: true,
        top: true,
        right: true,
        bottom: true,
        child: Scaffold(
          resizeToAvoidBottomInset: false,
          appBar: AppBar(
            title: Text(widget.title),
          ),
          body: Center(
            child: Column(
              mainAxisAlignment: MainAxisAlignment.center,
              children: <Widget>[
                Text(
                  'You have pushed the button this many times:',
                ),
                Text(
                  '$_counter',
                  style: Theme.of(context).textTheme.display1,
                ),
              ],
            ),
          ),
          floatingActionButton: FloatingActionButton(
            onPressed: _incrementCounter,
            tooltip: 'Increment',
            child: Icon(Icons.add),
          ), 
        ),
      ),
    );
  }