Я кодирую проект, используя expo react native, и я сделал горизонтальную прокрутку для изображений. Изображения оформлены правильно, когда используются пиксели: <Image code... style = {{width: 350}}/>
Однако, если я попытаюсь изменить 350
на 35%
, изображение исчезнет с экрана. Я пробовал несколько разных способов решить эту проблему, например, добавить окно просмотра шириной 100% для родительского класса (как показано ниже), однако это все еще не работает.
Вот файл кода:
import { StatusBar } from 'expo-status-bar';
import { StyleSheet, Text, View, Image, ScrollView, Modal, Pressable } from 'react-native';
import tw from 'tailwind-react-native-classnames';
import { useState } from 'react';
export default function ImpEvents() {
const slides = ['https://patch.com/img/cdn20/users/22844250/20200421/014148/styles/patch_image/public/livingston-highschool-schoolpr___21133742706.jpg', 'https://patch.com/img/cdn/users/22844250/2015/05/raw/20150555523bf088bd6.jpg', 'https://patch.com/img/cdn/users/22821264/2014/08/raw/5400e8ea02f3c.png']
const [modalVisible1, setModalVisible1] = useState(false);
const [modalVisible2, setModalVisible2] = useState(false);
const [modalVisible3, setModalVisible3] = useState(false);
return (
<View style = {{width: '100%'}}>
<Modal
animationType = "slide"
presentationStyle='pageSheet'
visible = {modalVisible1}
onRequestClose = {() => {
setModalVisible1(!modalVisible1);
}}>
<View style = {{ position: 'absolute', backgroundColor: 'grey', top: 10, alignContent: 'center', height: 5, width: '10%', alignSelf: 'center', borderRadius: 10 }}>
</View>
<Text style = {{ fontSize: 80, alignSelf: 'center' }}>1</Text>
</Modal>
<Modal
animationType = "slide"
presentationStyle='pageSheet'
visible = {modalVisible2}
onRequestClose = {() => {
setModalVisible2(!modalVisible2);
}}>
<View style = {{ position: 'absolute', backgroundColor: 'grey', top: 10, alignContent: 'center', height: 5, width: '10%', alignSelf: 'center', borderRadius: 10 }}>
</View>
<Text style = {{ fontSize: 80, alignSelf: 'center' }}>2</Text>
</Modal>
<Modal
animationType = "slide"
presentationStyle='pageSheet'
visible = {modalVisible3}
onRequestClose = {() => {
setModalVisible3(!modalVisible3);
}}>
<View style = {{ position: 'absolute', backgroundColor: 'grey', top: 10, alignContent: 'center', height: 5, width: '10%', alignSelf: 'center', borderRadius: 10 }}>
</View>
<Text style = {{ fontSize: 80, alignSelf: 'center' }}>3</Text>
</Modal>
<Text style = {{ left: 40, fontFamily: 'OpenSans_700Bold', marginTop: '70%', fontSize: 25, color: "#3D3D3D" }}>Important Information</Text>
<View style = {{ flexDirection: 'row', justifyContent: 'space-between', marginTop: 10 }}>
<ScrollView horizontal = {true} showsHorizontalScrollIndicator = {false} style = {{ paddingTop: 7, paddingLeft: 40 }} snapToInterval = {370} decelerationRate = {0}>
<Pressable onPress = {() => setModalVisible1(true)} style = {({ pressed }) => [
{
opacity: pressed
? '0.5'
: '1'
},
]}>
<Image
source = {{
uri: slides[0]
}}
style = {{ width: "35%", height: 175, borderRadius: 10 }}
/>
</Pressable>
<Pressable onPress = {() => setModalVisible2(true)} style = {({ pressed }) => [
{
opacity: pressed
? '0.5'
: '1'
},
]}>
<Image
source = {{
uri: slides[1]
}}
style = {{ width: 350, height: 175, borderRadius: 10, marginLeft: 20 }}
/>
</Pressable>
<Pressable onPress = {() => setModalVisible3(true)} style = {({ pressed }) => [
{
opacity: pressed
? '0.5'
: '1'
},
]}>
<Image
source = {{
uri: slides[2]
}}
style = {{ width: 350, height: 175, borderRadius: 10, marginLeft: 20 }}
/>
</Pressable>
<View
style = {{ width: 50, height: 175, borderRadius: 10, marginLeft: 20 }}
/>
</ScrollView >
</View>
<View/>
)
}
Таким образом, изображение с индексом 0 не отображается, но изображения с индексами 1 и 2 отображаются, когда я не использую проценты.
Спасибо за помощь.
Это происходит потому, что его родительский компонент <Pressable>
не имеет упомянутого стиля ширины, если вы хотите предоставить динамическую высоту или ширину в процентах, тогда вы должны указать высоту и ширину для его родительского компонента.
просто дайте width: "100%"
его родительскому компоненту, а затем проверьте, и если это не сработает, проверьте родительский компонент родительского компонента и отследите его.
Если вы хотите использовать %
, вам нужно указать ширину родительского компонента. Или есть другое решение, с помощью которого вы можете получить ширину устройства в React Native. Вы можете добиться этого, используя Dimension
, как показано ниже:
import { Dimensions } from 'react-native';
const ScreenWidth = Dimensions.get('window').width;
Таким образом, чтобы придать 90%
ширину устройству, вы можете использовать его вот так width: ScreenWidth * 0.9
.