RN 图像调整模式：'contain' 奇怪的行为

Question

我想要 header 像这样连续显示图片和标题： 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 - 图片上方和下方有不必要的space。

我在这里缺少什么以获得所需的结果？

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

Answer 1

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

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

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

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

RN 图像调整模式：'contain' 奇怪的行为

RN Image resizeMode: 'contain' strange behaviour

resize

image

flexbox

react-native