Белое пространство появляется при навигации - SafeView - PullRequest
Новая
       128

Белое пространство появляется при навигации - SafeView

0 голосов
/ 29 мая 2020

Раньше я использовал переключение для управления навигацией. Сейчас перехожу на использование хуков навигации. С одной страницы я перехожу на другую страницу следующим образом: 

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

Когда я перехожу на экран, я вижу нежелательное пустое пространство внизу, хотя в исходном дизайне этого не было. Однако, когда я нажимаю кнопку Cancel, пространство исчезает, страница форматируется в соответствии с тем, как она должна быть, а затем возвращается к исходной странице. Почему отображается белое пространство? Как мне его удалить? enter image description here

enter image description here

Вот как выглядит код для моей страницы 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, весь экран переместится вверх, кроме кнопок «Отмена» и «Готово». Пустое пространство увеличивается еще больше

1 Ответ

0 голосов
/ 29 мая 2020

этот пробел добавляется safeAreaView. если вы хотите, чтобы у safeAreaView был тот же зеленый цвет фона, который вы должны установить для него или его родительского стиля, в настоящее время у вас есть стили только для дочернего элемента View со стилями .container

Я не понимаю, что вы означает «как мне их разделить». в основном, если вы видите, что красный цвет появляется при применении стилей в safeAreaView, тогда вместо красного используйте серый / зеленый цвет в safeAreaView (который вы уже используете для остальной части экрана), чтобы он выглядел бесшовно.

...