react-native modal 不占用设备的全屏

Posted 2023-02-16

【中文标题】react-native modal 不占用设备的全屏

【英文标题】：react-native modal not taking the full screen of the device

【发布时间】：2021-09-17 05:47:26

【问题描述】：

我有一个模式，我希望它在打开时占据设备的全屏。 但它正在向右移动，而不是全屏。如下所示：

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

【问题讨论】：

请通过 Stackblitz 或 Codesandbox 发布实时示例，以便人们对其进行调试。甚至使用 Browserstack。

@SDB_1998 wp(100) 和 hp(100) 是什么？

@Rohit wp 是来自 @common-styles/responsiveSize.js 库的 widthPercentageToDP 和 hp 的高度

【参考方案1】：

试试

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

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