导航显示空白-SafeView

Question

[以前，我使用切换来处理导航。现在，我切换到useNavigation挂钩。我从一页移动到另一页，如下所示：

<TouchableOpacity
      onPress={() => {
        if (title == 'h') {
          navigation.navigate('AddFriend');
        }
      }}>

[在导航到屏幕时，即使原始设计没有此空白，我仍在底部看到一个空白区域。但是，当我单击Cancel按钮时，空格消失了，页面将根据其应有的格式进行格式化，然后导航回到原始页面。为什么显示空白？如何删除？

这是我的AddFriend页面的代码如下：

type AddFriendPageProps = {
  toggleShowPage: () => void;
  showAddFriendPage: boolean;
};

export const AddFriendPage: React.FunctionComponent<AddFriendPageProps> = ({
  toggleShowPage,
  showAddFriendPage,
}) => {
  const [showAddFriendPhonePage, setShowAddFriendPhonePage] = useState(false);
  const navigation = useNavigation();

  const toggleAddFriendPhonePage = () => {
    setShowAddFriendPhonePage(showAddFriendPhonePage ? false : true);
  };

  return (
    <Modal 
    visible={showAddFriendPage} 
    animationType="slide" transparent={true}>
      <SafeAreaView>
        <View style={styles.container}>
          <View style={styles.searchTopContainer}>
            <View style={styles.searchTopTextContainer}>
              <Text
                style={styles.searchCancelDoneText}
                onPress={() => navigation.navigate('Home')}
                >
                Cancel
              </Text>
              <Text style={styles.searchTopMiddleText}>Add Friend</Text>
              <Text style={styles.searchCancelDoneText}>Done</Text>
            </View>
            <View style={styles.searchFieldContainer}>
              <View style={styles.buttonContainer}>
                <Button
                  rounded
                  style={styles.button}
                  onPress={() => setShowAddFriendPhonePage(true)}>
                  <Text style={styles.text}>Add by Phone Number</Text>
                </Button>
              </View>
            </View>
          </View>
          <AddFriendPhonePage
            showAddFriendPhonePage={showAddFriendPhonePage}
            toggleShowPage={toggleAddFriendPhonePage}
          />
        </View>
      </SafeAreaView>
    </Modal>
  );
};

样式：

const styles = ScaledSheet.create({
  container: {
    height: '100%',
    backgroundColor: 'white', //'#2E3331',
    width: '100%',
  },
  searchTopContainer: {
    backgroundColor: '#2E3331',
    height: moderateScale(750),
  },
  searchTopTextContainer: {
    flexDirection: 'row',
    justifyContent: 'space-between',
    marginVertical: moderateScale(15),
    height: moderateScale(30),
    paddingLeft: moderateScale(30),
    paddingRight: moderateScale(30),
  },
  searchCancelDoneText: {
    fontSize: moderateScale(14),
    color: 'white',
  },
  searchTopMiddleText: {
    fontSize: moderateScale(15),
    fontWeight: 'bold',
    color: 'white',
  },
  searchFieldContainer: {
    alignItems: 'center',
    height: moderateScale(120),
  },
  button: {
    width: moderateScale(200),
    height: moderateScale(50),
    backgroundColor: '#31C283',
    justifyContent: 'center',
    marginBottom: 20,
  },
  text: {
    fontSize: moderateScale(14, 0.7),
  },
  searchField: {
    backgroundColor: 'white',
    width: moderateScale(300, 0.3),
    height: verticalScale(40),
    marginVertical: moderateScale(6),
    borderRadius: verticalScale(10),
  },
  buttonContainer: {
    paddingTop: 250,
    flexDirection: 'column',
    alignItems: 'center',
    justifyContent: 'space-between',
  },
  inputText: {
    color: '#ffffff',
  },
  searchText: {
    fontSize: moderateScale(14),
  },
});

如果将容器的背景颜色更改为红色，然后在safeView上应用该样式，则它将使顶部（写有时间的地方）变为红色，而使底部与其他屏幕匹配。两者都在safeView之下。如何将它们分开？

如果我删除SafeView，则整个屏幕会向上移动，除了“取消并完成”按钮外。空格增加更多

Answer 1

该空白由safeAreaView添加。如果要使safeAreaView具有相同的绿色背景色（必须在其上设置样式或它的父样式），则当前在子View元素上仅具有styles.container