水平居中图像，而不是垂直居中

Question

我希望有一个缩放的图像来填充父容器的宽度，同时保持宽高比。

这是代码：

import React from 'react';
import { StyleSheet, Text, View, Image } from 'react-native';

export default class App extends React.Component {
  render() {
    return (
      <View style={styles.container}>
        <Image style={styles.bgContainer} resizeMode='contain' source={require('./app/images/green.png')} />
        <Text>text</Text>
      </View>
    );
  }
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: '#fff',
    flexDirection:'column',
  },
  bgContainer: {
    flex: 1,
    width: null,
    height: null,
    justifyContent: 'flex-start',
  }
});

这是我的结果：

我不希望图像占据其缩放高度的更多空间，我希望结果如下：

Answer 1

<强>更新

作为@Cherniv评论，使用aspectRatio: 1就足够了。因此，无需手动计算。只需将其添加到bgContainer。

<强>旧

您向图片添加了flex: 1。哪个是flex: 1父母的唯一子女。因此，它涵盖了整个父母。首先，移除flex。制作图像的纵横比，并使用屏幕宽度生成图像相对性的高度：

import React from 'react';
import { StyleSheet, Text, View, Image,Dimensions } from 'react-native';
const { width } = Dimensions.get('window');

export default class App extends React.Component {
  render() {
    return (
      <View style={styles.container}>
        <Image style={styles.bgContainer} resizeMode='contain' source={require('./app/images/green.png')} />
       <Text>text</Text>
      </View>
    );
  }
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: '#fff',
    flexDirection:'column',
  },
  bgContainer: {
   width: width,
   height: imageHeight * width / imageWidth, // imageHeight & imageWidth are from your image pixel dimensions
   justifyContent: 'flex-start',
 }
});