我是react-native的新手(2天前开始),但我很快就学会了,因为我已经知道常规的react。我正在尝试编写一个现实世界的应用程序,但我不知道如何正确放置图像,我希望我的图像标签占据屏幕上的所有水平空间,但我也希望它保留在最顶部屏幕并保持其纵横比(我无法对其进行硬编码,因为我还将显示车牌的其他图片,包括不像北美那样的欧洲车牌图片),同时不占用实际图像所有可用的垂直空间。
这是我的代码渲染内容和我实际想要的内容的 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的所有组合。
通常,将
flex
应用于包含 <View />
和 <Image />
的 <Button />
标签后,父组件的子组件将应用相同的 flex
属性。因此,您可以删除 flex
下的 <Image />
道具。
在 React-Native 中处理
<Image />
一段时间后,我必须说,为 height
和 width
指定值对于 <Image />
的正确显示非常重要。
您可以在我的世博会示例中尝试一下这里。
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 />
吗?当用户在移动设备上按下它时,它会提供视觉帮助。
当你使用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;
补充答案:
const Component = ({source = {} as any}) => {
const [imgSize, setImgSize] = useState({ width: 0, height: 0 })
useEffect(() => {
const img = Image.resolveAssetSource(source)
const screenWidth = Dimensions.get("window").width;
const scaleFactor = img.width / screenWidth;
const imageHeight = img.height / scaleFactor;
setImgSize({ width: screenWidth, height: imageHeight});
}, [source])
return <View style={{ flex: 1, justifyContent: "flex-start", alignItems: "center" }}>
<Image style={{
flex: 1,
width: imgSize.width,
height: imgSize.height
}} resizeMode="contain" source={source} />
</View>
}
无论源图像(uri、b64 等)如何,这都可以工作,并且会考虑尺寸。 要使图像变小,只需将宽度和高度乘以百分比(例如:宽度/0.7 将使图像图像变为原始尺寸的 70%)