Ошибка React Native Sizing ⇐ IOS

[Гость]

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


Вот как это выглядит после перезапуска симулятора:
[img]https://i .imgur.com/pAX7Szj.png[/img]
И я снова делаю это нормальным, перейдя к таблице стилей и изменив числа на случайные, сохранив, а затем установив их снова к нужным значениям и сохраняю.
Вот мой код:
'Slider.js'

Код: Выделить всё

import {
Animated,
FlatList,
StyleSheet,
Text,
View,
ImageBackground,
} from "react-native";
import React, { useRef, useState } from "react";
import AS from "../assets/AS_images/images";
import CAS from "../assets/CAS_images/images";
import CGS from "../assets/CS_images/images";
import LSA from "../assets/LSA_images/images";
import MG from "../assets/MG_images/images";
import NAS from "../assets/NAS_images/images";
import PAS from "../assets/PAS_images/images";
import TCS from "../assets/TCS_images/images";
import SlideItem from "./SlideItem";
import Pagination from "./Pagination";

const Slider = (props) => {
const [index, setIndex] = useState(0);
const scrollX = useRef(new Animated.Value(0)).current;

const handleOnScroll = (event) => {
Animated.event(
[
{
nativeEvent: {
contentOffset: {
x: scrollX,
},
},
},
],
{
useNativeDriver: false,
}
)(event);
};

const handleOnViewableItemsChanged = useRef(({ viewableItems }) => {
// console.log('viewableItems', viewableItems);
setIndex(viewableItems[0].index);
}).current;

const viewabilityConfig = useRef({
itemVisiblePercentThreshold: 50,
}).current;

return (

 }
horizontal
pagingEnabled
snapToAlignment="center"
showsHorizontalScrollIndicator={false}
onScroll={handleOnScroll}
onViewableItemsChanged={handleOnViewableItemsChanged}
viewabilityConfig={viewabilityConfig}
/>
data={
props.path == "AS"
? AS
: props.path == "CAS"
? CAS
: props.path == "CGS"
? CGS
: props.path == "LSA"
? LSA
: props.path == "MG"
? MG
: props.path == "NAS"
? NAS
: props.path == "PAS"
? PAS
: props.path == "TCS"
? TCS
: AS
}
scrollX={scrollX}
index={index}
/>

);
};

export default Slider;

const styles = StyleSheet.create({});

'SlideItem.js'

Код: Выделить всё

import {
Image,
StyleSheet,
Text,
View,
Dimensions,
Animated,
Easing,
} from "react-native";
import React from "react";

const { width, height } = Dimensions.get("screen");

const SlideItem = ({ item }) =>  {
const translateYImage = new Animated.Value(40);

return (



);
};

export default SlideItem;

const styles = StyleSheet.create({
container: {
width,
height,
alignItems: "center",
},
image: {
width: "100%",
height: "80%",
},
});

'Pagination.js'

Код: Выделить всё

import { StyleSheet, Animated, View, Dimensions } from "react-native";
import React from "react";

const { width } = Dimensions.get("screen");

const Pagination = ({ data, scrollX, index }) => {
return (

{data.map((_, idx) => {
const inputRange = [(idx - 1) * width, idx * width, (idx + 1) * width];

const dotWidth = scrollX.interpolate({
inputRange,
outputRange: [12, 30, 12],
extrapolate: "clamp",
});

const opacity = scrollX.interpolate({
inputRange,
outputRange: [0.2, 1, 0.1],
extrapolate: "clamp",
});

const backgroundColor = scrollX.interpolate({
inputRange,
outputRange: ["#ccc", "#000", "#ccc"],
extrapolate: "clamp",
});

return (

);
})}

);
};

export default Pagination;

const styles = StyleSheet.create({
container: {
position: "absolute",
bottom: 35,
flexDirection: "row",
width: "100%",
alignItems: "center",
justifyContent: "center",
},
dot: {
width: 12,
height: 12,
borderRadius: 6,
marginHorizontal: 3,
backgroundColor: "#fffff",
},
dotActive: {
backgroundColor: "#18578a",
},
});

I am using React Native + Expo Go. I am opening the simulator in production build iOS.
Tried Changing to float, changing the height and width to sizes but didn't help


Источник: https://stackoverflow.com/questions/781 ... sizing-bug