![](/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.