![](/img/trans.png)
[英]Why is my child container taking full width when the parent has a padding on it in my react-native app?
[英]react-native modal not taking the full screen of the device
我有一个模式,我希望它在打开时占据设备的全屏。 但它正在向右移动而不是全屏显示。 这是它的外观:
<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
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.