问导航上显示空白- SafeView
EN

Stack Overflow用户

提问于 2020-05-29 13:42:59

回答 1查看 101关注 0票数 0

以前，我使用toggling来处理导航。现在我切换到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),
  },
});