Изображение React Native занимает все доступное вертикальное пространство
Я новичок в React-native (начал 2 дня назад), но я быстро освоил его, потому что уже знал обычную реакцию. Я пытаюсь написать приложение для реального мира и не могу понять, как правильно разместить изображение, я хочу, чтобы мой тег изображения занимал все горизонтальное пространство на экране, но я также хочу, чтобы он оставался в самом верху. экрана и сохранить его соотношение сторон (которое я не могу жестко закодировать, потому что я также буду отображать другие изображения номерных знаков, в том числе европейские, которые не 2/1, как в Северной Америке), и все это при том, что фактическое изображение не занимает все доступное вертикальное пространство.
Вот редактирование GIMP того, что отображает мой код и что я на самом деле хочу: https://ibb.co/XJgrhkC
Вот моя функция рендеринга:
export default class App extends Component {
...
render() {
return (
<View style = {{ flex: 1, justifyContent: 'flex-start', alignItems: 'center' }}>
<Image
source = {require(`./resources/images/north_america/original/alaska.jpg`)}
style = {{ flex: 1, width: screenWidth }}
resizeMode = "contain" />
<Button title = "Random state" onPress = {this.getRandomState} />
</View>
);
}
}
Я знаком с параметрами компоновки css, но react-native кажется другим, и я не могу уложить в голове все комбинации ширины, flex и resizeModes.
Ответы 2
Когда вы используете flex, вы можете увидеть, что изображение автоматически занимает много места, когда вы добавляете {borderWidth: 2, borderColor: 'red'}. Вместо этого вы должны указать высоту вручную. Если вы хотите, чтобы он правильно масштабировался, вы можете попробовать это:
import React from "react";
import { View, Image, Button, Dimensions } from "react-native";
class App extends React.Component {
state = {
imgWidth: 0,
imgHeight: 0
};
componentDidMount() {
Image.getSize("https://i.ibb.co/HgsfWpH/sc128.jpg", (width, height) => {
// Calculate image width and height
const screenWidth = Dimensions.get("window").width;
const scaleFactor = width / screenWidth;
const imageHeight = height / scaleFactor;
this.setState({ imgWidth: screenWidth, imgHeight: imageHeight });
});
}
render() {
return (
<View
style = {{ flex: 1, justifyContent: "flex-start", alignItems: "center" }}
>
<Image
style = {{
flex: 1,
width: Dimensions.get("window").width,
borderColor: "red",
borderWidth: 2
}}
source = {{
uri: "https://i.ibb.co/HgsfWpH/sc128.jpg"
}}
resizeMode = "contain"
/>
<Button title = "Random state" onPress = {this.getRandomState} />
</View>
);
}
}
export default App;
как правило, после применения flex к тегу <View />, содержащему <Image /> и <Button />, к дочерним элементам родительского компонента будет применена одна и та же flex опора. Итак, вы можете удалить опору flex под <Image />.
Имея дело с <Image /> в react-native в течение некоторого времени, я должен сказать, что указание значений как для height, так и для width важно для правильного отображения <Image />.
вы можете попробовать это на моем примере Expo здесь.
render() {
return (
<View style = {{
flex: 1,
justifyContent: 'flex-start',
alignItems: 'center'
}}>
<Image
source = {require(`./resources/images/north_america/original/alaska.jpg`)}
style = {{
width: screenWidth,
height: 200,
}}
resizeMode = "contain"
/>
<Button
title = "Random state"
onPress = {this.getRandomState}
/>
</View>
);
}
Кроме того, поскольку вы новичок в React Native, могу ли я предложить вам изменить <Button /> на <TouchableOpacity />? он предоставляет наглядную помощь, когда пользователь нажимает ее на мобильном устройстве.
Спасибо, это как раз то, что мне было нужно. Ответ kenmistry также был шагом в правильном направлении, но ваш лучше подходит, потому что все мои изображения имеют разное соотношение сторон, и возможность вычислить высоту изображения на лету очень полезна!