导航上出现空白 - 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，整个屏幕会向上移动，除了 Cancel 和 Done 按钮。空白增加更多

Answer 1

该空白是由 safeAreaView 添加的。如果您希望 safeAreaView 具有相同的绿色背景颜色，则必须在其或其父级上设置样式，您目前仅在子 View 元素上具有样式和 styles.container

我不明白您所说的“我如何将它们分开”是什么意思。基本上，如果您在 safeAreaView 上应用样式时看到红色出现，那么在 safeAreaView 上使用灰色/绿色而不是红色（您已经在屏幕的其余部分使用），这样它看起来就无缝了。