Storybook Navigator 的左上角与 Android 模拟器的通知栏重叠

Question

我正在创建一个 storybook documentation of my custom App Components in 'react-native'。

问题是，top left of navigator 与 notification bar of android 重叠。

虽然我可以通过边距修复故事本身，但导航器似乎无法修复。我尝试使用 SafeAreaView from react-native，但似乎无法解决问题。

我见过一些类似的问题，例如，但它们是针对应用程序代码的。谁能指出 Storybook 的修复方法？

我还附上了问题的屏幕截图和我正在寻找修复程序的代码。

截图

代码：

import * as Font from 'expo-font'
import AppLoading from 'expo-app-loading'
import React, { useState } from 'react';
import Storybook from './storybook'
import { registerRootComponent } from 'expo';
import { SafeAreaView ,StyleSheet} from 'react-native';

const fetchFonts=()=>{
    return Font.loadAsync({

      'open-sans-bold': require('./assets/fonts/OpenSans-Bold.ttf'),
      'open-sans': require('./assets/fonts/OpenSans-Regular.ttf')
    });
  };
 
  

function App(props) {
  const [dataLoaded,setDataLoaded] =useState(false);
    console.log('Data is Loadinggg...',dataLoaded)
  if(!dataLoaded){
    return (
      <AppLoading startAsync={fetchFonts} onFinish={()=> setDataLoaded(true)} onError={(err)=>{console.log(err)}}/> // donot proceed further until this is true -> render nothing
    );
  }
  else{
    return <SafeAreaView style= {styles.container} ><Storybook {...props}/></SafeAreaView>
  }
}
export default registerRootComponent(App);
const styles = StyleSheet.create({
  container: {
    flex: 1,
  }
});

代替 <SafeAreaView></SafeAreaView> 我正在寻找修复程序。有人可以帮忙吗？

Answer 1

正如Docs所说，

SafeAreaView 目前仅适用于 iOS 版本为 iOS 11 或更高版本的设备。

所以你可以做的是，

选项 1

import { View, StyleSheet, StatusBar } from 'react-native'; // At the top

将你的return替换成这个

return (
  <View style={styles.container}>
    <Storybook {...props} />
  </View>
);

还有你的样式表

const styles = StyleSheet.create({
  container: {
    flex: 1,
    paddingTop: StatusBar.currentHeight // This wil give proper padding at the top
  },
});

选项 2

import { StyleSheet, StatusBar, Platform, SafeAreaView } from 'react-native';

您的 return 语句将是

return <SafeAreaView style= {styles.container} ><Storybook {...props}/></SafeAreaView>

你的样式表将是这样的

const styles = StyleSheet.create({
  container: {
    flex: 1,
    paddingTop: Platform.OS === 'ios' ? 0 : StatusBar.currentHeight,
  },
});

Storybook Navigator 的左上角与 Android 模拟器的通知栏重叠

Top-Left of Storybook Navigator overlaps with the Notification bar of Android Emulator

javascript

android

react-native

storybook