RN Image resizeMode：“包含”奇怪的行为答案

【问题标题】：RN Image resizeMode: 'contain' strange behaviourRN Image resizeMode：“包含”奇怪的行为
【发布时间】：2017-06-15 02:23:18
【问题描述】：

我想像这样连续获取带有图片和标题的标题： 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 - 图像上方和下方有不必要的空间。

为了得到想要的结果，我在这里缺少什么？

我的猜测：图像的原始大小为 360x180（因此默认情况下它应该是 768 模拟器屏幕的一半宽度），但 Android 接受它作为 mdpi 图像并放大到 xhdpi（两个方向 x2），然后使用它放大图像以计算容器高度。只有 THEN resizeMode: 'contain' 适用（在新的双高容器内）。有什么建议？

【问题讨论】：

标签： image react-native resize flexbox

【解决方案1】：

这可能看起来像一个损坏的 api，但这是我在我的案例中解决它的方法：

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

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

【讨论】：

你太棒了。有用！但为什么会以这种奇怪的方式呢？
不，它最终不起作用（（如果容器高度发生变化，即如果附加在行视图中（在我的情况下是右一个）高度减小到即一行（小于图像计算高度） - 'contain' 不会保持图像的高度。结果在这里：i66.tinypic.com/k1tidh.png"border="0" alt="Wrong resize">

【解决方案2】：

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

...
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}
/>

【讨论】：