HarmonyOS 鸿蒙Next react-native中SafeAreaView使用显示UI有问题

HarmonyOS 鸿蒙Next react-native中SafeAreaView使用显示UI有问题

import React from "react";
import { View, Text, Dimensions, StyleSheet, Button,SafeAreaView, SectionList, StatusBar} from "react-native";
import {
  TabView,
  TabBar,
  SceneMap,
  NavigationState,
  SceneRendererProps,
} from "react-native-tab-view";

type State = NavigationState<{
  key: string,
  title: string,
}>;

const FirstRoute = () => (
  <View
style={{
  alignItems: "center",
  padding: 10,
  margin: 10,
  width: "80%",
  height: "80%",
  flex: 1,
  backgroundColor: "#62BBD4",
}}
>
<Text
style={{
  width: "100%",
  height: "100%",
  fontWeight: "bold",
}}
>
First tab
  </Text>
  </View>
);

const DATA = [
  {
    title: 'Main dishes',
    data: ['Pizza', 'Burger', 'Risotto'],
  },
  {
    title: 'Sides',
    data: ['French Fries', 'Onion Rings', 'Fried Shrimps'],
  },
  {
    title: 'Drinks',
    data: ['Water', 'Coke', 'Beer'],
  },
  {
    title: 'Desserts',
    data: ['Cheese Cake', 'Ice Cream'],
  },
];

const App = () => (
  <SafeAreaView style={styles.container}>
  <SectionList
sections={DATA}
keyExtractor={(item, index) => item + index}
renderItem={({item}) => (
  <View style={styles.item}>
  <Text style={styles.title}>{item}</Text>
  </View>
)}
renderSectionHeader={({section: {title}}) => (
  <Text style={styles.header}>{title}</Text>
)}
/>
  </SafeAreaView>
);


const renderScene = SceneMap({
  first: FirstRoute,
  second: App,
});
export const TabViewTest = () => {
  const initialLayout = { width: Dimensions.get("window").width };
  const [index, setIndex] = React.useState(0);
  const prevIndex = React.useRef(0)

  const renderTabBar = (
    props: SceneRendererProps & { navigationState: State }
  ) => (
    <TabBar
  {...props}
  scrollEnabled={true}
  indicatorStyle={styles.indicator}
  style={styles.tabbar}
  labelStyle={styles.label}
  tabStyle={styles.tabStyle}
  />
  );

  const [routes, setRoutes] = React.useState([
    { key: "first", title: "First" },
    { key: "second", title: "Second" },
  ]);

  return (
    <>
    <Button
  title="dismiss Second"
  onPress={() => {
    prevIndex.current = index
    setRoutes([ { key: "first", title: "First" }]);
  }}
/>
  <Button
title="add Second"
onPress={() => {
  // setIndex(prevIndex.current)
  console.log(prevIndex.current)
  setRoutes([
    { key: "first", title: "First" },
    { key: "second", title: "Second" },
    { key: "third", title: "Third" },
  ]);
}}
/>
  <TabView
style={{
  flex: 1,
  width: 600,
  height: 200,
  margin: 10,
  backgroundColor: "#6D8585",
}}
navigationState={{ index, routes }}
renderScene={renderScene}
renderTabBar={renderTabBar}
swipeEnabled={false}
onIndexChange={setIndex}
initialLayout={initialLayout}
/>
  </>
);
};

export default TabViewTest;

const styles = StyleSheet.create({
  tabbar: {
    backgroundColor: "#3f51b5",
    height: 70,
    width: 600,
  },
  indicator: {
    backgroundColor: "#ffeb3b",
    width: 150,
    height: 5,
  },
  label: {
    fontWeight: "400",
    fontSize: 20,
    width: 100,
    height: 50,
    color: "black",
  },
  tabStyle: {
    height: 65,
    width: 150,
    backgroundColor: "#BAFDAD",
  },
  container: {
    flex: 1,
    paddingTop: StatusBar.currentHeight,
    marginHorizontal: 16,
  },
  item: {
    backgroundColor: '#f9c2ff',
    padding: 20,
    marginVertical: 8,
  },
  header: {
    fontSize: 32,
    backgroundColor: '#fff',
  },
  title: {
    fontSize: 24,
  },
});

使用如上demo
在SECOND的tab中下面的SafeAreaView布局距离顶部留了很长的间隙