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 &&
      <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),}

解决方法

试试

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

并且请尝试将您的代码放在一个实时示例中，例如小吃、Stackblitz 或 Codesandbox 并提供 URL