React Native RN图像尺寸调整模式：“遏制”怪异行为

nwlqm0z1 于 2023-02-25 发布在 React

关注(0)|答案(3)|浏览(142)

我想得到标题与图片和标题在一行这样：Desired result
使用此代码：

<View style={{ flex: 1, backgroundColor:'#ccf6c0', flexDirection:'column',}}>
      {/* ======================= HEADER ===================================*/}
      <View style={{flex: 0, flexDirection: 'row', backgroundColor:'#d5d5f7'}}>
         <Image
           source={require('./images/logo.png')}
           style={{resizeMode: 'contain', flex: 1}}
         />
         <View style={{flex: 1, justifyContent: 'center', backgroundColor:'#f7d5d5'}}>
           <Text style={{fontSize: 17, fontWeight:'bold', marginLeft: 7}}>
             Title
           </Text>
         </View>
       </View>
</View>

但是我得到了这个输出：Wrong result-图像上方和下方有不必要的空间。
我错过了什么才能得到想要的结果？
我的猜测是：图像的原始大小为360 x180（因此默认情况下，它应该是768模拟器屏幕宽度的一半），但Android接受它作为mdpi图像，并将其放大到xhdpi（两个方向都是x2），然后使用此放大图像计算容器高度。“contain”适用（在新的双层高度容器内）。有什么建议吗？

react-native

来源：https://stackoverflow.com/questions/41927253/rn-image-resizemode-contain-strange-behaviour

3条答案

按热度按时间

huus2vyu1#

这可能看起来像一个破碎的API，但这是我如何解决我的情况：

<Image source={require('./images/logo.png')} 
       resizeMode='contain' 
       style={{flex:1, width: null, height: null}}/>

宽度和高度null看起来很奇怪，但这样可以摆脱静态大小，并调整视图的大小。

赞(0）回复(0）举报 2023-02-25

but5z9lq2#

在这种情况下，唯一有效的解决方案是直接使用尺寸，以便在调整图像大小之前计算和硬设置图像帧的大小：

...
import Image, Dimensions, StyleSheet from 'react-native';
...
const height = Dimensions.get('window').height;
...
const styles = StyleSheet.create({
  imageBox: {
    flex: 1,
    resizeMode: 'contain',
    width: width/2.12,
    height: width/4.24,
  },
  })
...
<Image
   source={require('./images/image.png')}
   style={styles.imageBox}
/>

赞(0）回复(0）举报 2023-02-25

zbwhf8kr3#

您可以从Image组件中删除样式，并在其周围添加一个视图，然后使用该视图和图像组件中的resizeMode='contain' prop 来决定图像的大小。
例如：

<View style={{  height: 200, width: 200, justifyContent: 'center';}}>
     <Image image={source} resizeMode="contain" />
 </View>

赞(0）回复(0）举报 2023-02-25

我来回答

React Native RN图像尺寸调整模式：“遏制”怪异行为

3条答案

相关问题

热门标签

最新问答