潍坊网络建站模板,杭州网站建设公司排名,网站分析步骤,板绘线下培训班我的app.tsx文件内容如下#xff1a;
import MainPage from ./screens/Main/index;export default function App() {return (MainPage /);
}需求#xff1a;当屏幕方向旋转90度后#xff0c;状态栏所在位置是处于顶部安全区域所在位置。需要忽略顶部安…我的app.tsx文件内容如下
import MainPage from ./screens/Main/index;export default function App() {return (MainPage /);
}需求当屏幕方向旋转90度后状态栏所在位置是处于顶部安全区域所在位置。需要忽略顶部安全区区域这样才不会显得非常突兀。
在使用expo的eas模块打包完毕后手机端下载打开该APP发现整个APP都被包裹在安全区域内显示了这就非常奇怪了我们明明没有使用安全区域的组件为何APP会被置于安全区域内显示
在网上找了很久原因感觉这个是相对可靠的Expo 默认会在 Android 上启用 SafeAreaView。即使你在代码中没有使用 SafeAreaViewExpo 也可以在预留时自动添加。
然后就是推荐我们使用这个第三方包来管理安全区域react-native-safe-area-context
修改后的代码如下
import { SafeAreaProvider, initialWindowMetrics } from react-native-safe-area-context;
import { SafeAreaView } from react-native-safe-area-context;
import MainPage from ./screens/Main/index;export default function App() {return (SafeAreaProviderSafeAreaView style{{ flex: 1 }} edges{[bottom]} MainPage //SafeAreaView/SafeAreaProvider);
}SafeAreaView的edges参数官方解释为
Array of top, right, bottom, and left. Defaults to all.Sets the edges to apply the safe area insets to.大致意思就是设置要应用安全区域插入的边缘默认值是[“left”,“right”,“top”,“bottom”]
我的理解就是哪边需要安全区就将该方向放入数组中然后给edges参数即可。
打包后依旧不行后来忘了在哪篇文章看到这样一段话了大致意思说状态栏的高度是由状态栏的背景颜色决定的把StatusBar设置为透明React Native将无法获取状态栏的安全区域。
修改代码如下
import { SafeAreaProvider, initialWindowMetrics } from react-native-safe-area-context;
import { SafeAreaView } from react-native-safe-area-context;
import MainPage from ./screens/Main/index;
import { StatusBar } from react-native;export default function App() {return (SafeAreaProvider initialMetrics{initialWindowMetrics}SafeAreaView style{{ flex: 1 }} edges{[bottom]} StatusBar translucent{true} backgroundColorrgba(0, 0, 0, 0) /MainPage //SafeAreaView/SafeAreaProvider);
}打包apk后成功解决。
