英文:
How to fit image inside the bounds of a parent container in React Native Expo
问题
我一直在尝试将一个标志图像放入登录页面的父容器中。页面的格式如下：
<NativeBaseProvider>
<View style={styles.container}>
<View style={styles.logoBox}>
{/* <Image source={images.logo} style={styles.logo} alt="Company Logo" /> */}
{/* <NativeBaseProvider> */}
<Image
source={images.logo}
alt="Company Logo"
style={styles.logo}
/>
{/* </NativeBaseProvider> */}
</View>
... 其他登录页面内容
</View>
</NativeBaseProvider>
container: {
flex: 1,
// width: '100%',
flexDirection: "column",
alignItems: 'center',
justifyContent: 'center',
},
logoBox: {
// height: '100%',
height: 300,
width: '80%',
// maxWidth: '100%',
alignItems: 'center',
justifyContent: 'center',
// padding: SIZES.medium,
marginBottom: 60,
},
logo: {
width: undefined,
height: undefined,
resizeMode: 'contain',
flex: 1,
// maxWidth: '100%',
// objectFit: 'contain',
},
我遇到的问题是图像非常大。在网页视图中，我可以使其适应logoBox父容器。但是当我在移动应用视图中查看时，图像会溢出屏幕两侧。
我尝试使用各种maxWidth、objectFit、width和height值的组合，如注释掉的代码所示，但似乎找不到一个能够在网页和移动视图上通用适配的解决方案。
英文:
I have been trying to fit a logo image into a parent container for a login page. This is the format for the page:
<NativeBaseProvider>
<View style={styles.container}>
<View style={styles.logoBox}>
{/* <Image source={images.logo} style={styles.logo} alt="Company Logo" /> */}
{/* <NativeBaseProvider> */}
<Image
source={ images.logo }
alt="Company Logo"
style={styles.logo}
/>
{/* </NativeBaseProvider> */}
</View>
... rest of login page stuff
</NativeBaseProvider>
container: {
flex: 1,
// width: '100%',
flexDirection: "column",
alignItems: 'center',
justifyContent: 'center',
},
logoBox: {
// height: '100%',
height: 300,
width: '80%',
// maxWidth: '100%',
alignItems: 'center',
justifyContent: 'center',
// padding: SIZES.medium,
marginBottom: 60,
},
logo: {
width: undefined,
height: undefined,
resizeMode: 'contain',
flex: 1,
// maxWidth: '100%',
// objectFit: 'contain',
},
The issue that I am having is that the image is a pretty large image. I am able to make it fit in the logoBox parent container when I am in web view. But when I check how it looks on the mobile app view, it is spilling off of the screen on the sides.
I have tried to use various combinations of maxWidth, objectFit, width, and height values, as seen in the commented out code, but I can't seem to find something that allows for the code to fit universally on both web and mobile views.
答案1
得分: 0
将resizeMode设置为stretch，并将高度和宽度设置为100％或flex 1。
你可以在这里阅读有关resizeMode的信息https://reactnative.dev/docs/image#resizemode
<!-- begin snippet: js hide: false console: true babel: false -->
<!-- language: lang-html -->
<NativeBaseProvider>
<View style={styles.container}>
<View style={styles.logoBox}>
{/* <Image source={images.logo} style={styles.logo} alt="Company Logo" /> */}
{/* <NativeBaseProvider> */}
<Image
source={ images.logo }
alt="Company Logo"
style={styles.logo}
resizeMode="contain" // or set to stretch or cover
/>
{/* </NativeBaseProvider> */}
</View>
... rest of login page stuff
</NativeBaseProvider>
<!-- end snippet -->
英文:
set resizeMode to stretch and give height and width to 100% or flex 1
you can read about resizeMode here https://reactnative.dev/docs/image#resizemode
<!-- begin snippet: js hide: false console: true babel: false -->
<!-- language: lang-html -->
<NativeBaseProvider>
<View style={styles.container}>
<View style={styles.logoBox}>
{/* <Image source={images.logo} style={styles.logo} alt="Company Logo" /> */}
{/* <NativeBaseProvider> */}
<Image
source={ images.logo }
alt="Company Logo"
style={styles.logo}
resizeMode="contain" // or set to stretch or cover
/>
{/* </NativeBaseProvider> */}
</View>
... rest of login page stuff
</NativeBaseProvider>
<!-- end snippet -->
通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库，让每个人都能够通过互相帮助和分享经验来进步。
评论