Использование% для ширины не работает React Native

Я кодирую проект, используя 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 отображаются, когда я не использую проценты.

Спасибо за помощь.

Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
В JavaScript одним из самых запутанных понятий является поведение ключевого слова "this" в стрелочной и обычной функциях.
Концепция локализации и ее применение в приложениях React ⚡️
Концепция локализации и ее применение в приложениях React ⚡️
Локализация - это процесс адаптации приложения к различным языкам и культурным требованиям. Это позволяет пользователям получить опыт, соответствующий...
Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer
Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer
В настоящее время производительность загрузки веб-сайта имеет решающее значение не только для удобства пользователей, но и для ранжирования в...
Безумие обратных вызовов в javascript [JS]
Безумие обратных вызовов в javascript [JS]
Здравствуйте! Юный падаван 🚀. Присоединяйся ко мне, чтобы разобраться в одной из самых запутанных концепций, когда вы начинаете изучать мир...
Система управления парковками с использованием HTML, CSS и JavaScript
Система управления парковками с использованием HTML, CSS и JavaScript
Веб-сайт по управлению парковками был создан с использованием HTML, CSS и JavaScript. Это простой сайт, ничего вычурного. Основная цель -...
JavaScript Вопросы с множественным выбором и ответы
JavaScript Вопросы с множественным выбором и ответы
Если вы ищете платформу, которая предоставляет вам бесплатный тест JavaScript MCQ (Multiple Choice Questions With Answers) для оценки ваших знаний,...
0
0
73
2
Перейти к ответу Данный вопрос помечен как решенный

Ответы 2

Это происходит потому, что его родительский компонент <Pressable> не имеет упомянутого стиля ширины, если вы хотите предоставить динамическую высоту или ширину в процентах, тогда вы должны указать высоту и ширину для его родительского компонента.

просто дайте width: "100%" его родительскому компоненту, а затем проверьте, и если это не сработает, проверьте родительский компонент родительского компонента и отследите его.

Ответ принят как подходящий

Если вы хотите использовать %, вам нужно указать ширину родительского компонента. Или есть другое решение, с помощью которого вы можете получить ширину устройства в React Native. Вы можете добиться этого, используя Dimension, как показано ниже:

import { Dimensions } from 'react-native';

const ScreenWidth = Dimensions.get('window').width;

Таким образом, чтобы придать 90% ширину устройству, вы можете использовать его вот так width: ScreenWidth * 0.9.

Другие вопросы по теме