React Native Layout - 具有响应式图像的Flexbox-Java 学习之路

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

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

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

更新

感谢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

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

1 回答

0

我已经阅读了一些关于本地反应的文章，我试图从这个网站开始这篇文章in here

我希望它能帮助你

回复于 2024-05-04T13:57:52+08:00

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

更新

1 回答

相关问题