React Native Layout - 具有响应式图像的Flexbox

Question

我想在React Native中使用Flexbox实现布局。我们的想法是能够拥有一个响应式图像，其下方有文本，垂直居中于页面上。

问题似乎是包含图像的视图最终消失，因为图像没有高度或填满整个屏幕高度并将图像下方的文本推到底部。

我认为它与未定义的图像尺寸有关，以使其以响应方式操作并填充父容器。

Here's a mockup of the layout

更新

感谢Topik Mujianto - 我实际上是在关注那个教程！

这是我的代码：

const styles = StyleSheet.create({
  pageContainer: {
    flex: 1,
    flexDirection:'row', 
    justifyContent:'center',
    backgroundColor: "blue",
    alignItems: 'flex-start'
  },
  columnStyle: {
    flex: 0.7,
    flexDirection:'column', 
    backgroundColor: "red",
    borderWidth: 1,
    alignItems: 'flex-start'
  },

  imgStyle: {
    flex: 1,
    height: undefined,
    width: undefined,
    alignSelf: 'stretch',
  }
})

const Component = props => (
  <View style={styles.pageContainer}>
    <View style={styles.columnStyle}>
      <Image 
      style={styles.imgStyle}
      resizeMode="contain" 
      source={require('../../../assets/images/onboarding-how-it-works.png')}
      />
    </View>
  </View>
);

这给出了这个：

Centered on page

但是，如果我尝试让图像与此代码对齐：

  imgStyle: {
    flex: 1,
    height: undefined,
    width: undefined,
    alignSelf: 'felx-start',
  }

我明白了（图像消失了）：

No image

经过一番调查后，我可以看到图像正在拉伸以适应，因为它具有flex：1属性。我在图像上将背景颜色设置为黄色，然后得到：

Image background shows size of image box

所以问题是，如何在没有容器拉伸到父级并缩小以适应响应式图像内容的情况下使图像响应，然后将其对齐到顶部？