Блог

Главная - Вопросы по программированию - реагируйте-собственный модальный режим, не занимающий весь экран устройства

реагируйте-собственный модальный режим, не занимающий весь экран устройства

#css #react-native #react-native-android #react-native-modal

Вопрос:

У меня есть модальный режим, в котором я хочу, чтобы он занимал весь экран устройства при включении. Но он смещается вправо и не занимает весь экран. Вот как это выглядит:

введите описание изображения здесь

 <Modal
    animationType="slide"
    transparent={true}
    visible={isImageModalVisible}
    onRequestClose={() => {
      setIsImageModalVisible(false);
    }}
  >
      <AvatarMediaSelection setModalVisible={setIsImageModalVisible}/>
  </Modal>

Вот модальный, и внутри этого модального у меня есть компонент со следующим кодом:

 <View style={styles.container}>
   
    <ScrollView>
    { photos.length > 0 amp;amp;
      <FlatList
          data={photos}
          numColumns={3}
          keyExtractor={(item) => item.node.image.uri}
          // onEndReached={() => setPhotosNum((prevState) => prevState   50)}
          onEndReached={({ distanceFromEnd }) => {
            if (distanceFromEnd < 0) return;
            return setPhotosNum((prevState) => prevState   50)
          }}
          renderItem={({item}) => {
              return(
                <TouchableOpacity style={styles.imageContainer} onPress={() => handleImageChoosen(item.node.image)}>
                  <Image
                      style={styles.image}
                      source={{uri: item.node.image.uri}}
                  />
                </TouchableOpacity>
              )
          }}
      />
    }
    </ScrollView>
</View>

И иметь следующий стиль:

 container: {
backgroundColor: 'white',
flex: 1,
width: wp(100),
height: hp(100),
},
image: {
width: wp(33),
height: hp(25),
}

Комментарии:

1. Пожалуйста, опубликуйте живой пример через Stackblitz или Codesandbox, чтобы люди могли его отладить. Даже используя Browserstack.

2. @SDB_1998 Что такое wp(100) и hp(100) ?

3. @Rohit wp-это widthPercentageToDP из @common-styles/responsiveSize.js библиотеки и hp для высоты

Ответ №1:

пробовать

 width: wp("100%"),
height: hp("100%"),

И, пожалуйста, попробуйте разместить свой код в живом примере, таком как snack, Stackblitz или Codesandbox, и укажите URL-адрес

Метки: ,