如何在React Native中使用列中的图像制作固定的网格视图？

Question

您好，我正在尝试创建每行3个列的固定（响应）网格视图。在每列中都会有一张图片，然后点击它会导航到相应的页面。我正在使用{{1 }}。我在他们的文档中找到了一种创建网格视图的简单方法。但是问题是，当我尝试在列中提供“图像”时，图像的全宽未加载，而当我在其他手机中取出时，网格视图却没有原因是我已经为native-base ui kit的{​​{1}}组件设置了height和width属性。但是，如果我没有设置高度，那么什么都不会渲染，我会得到一个空白页面。尚未将col设置为Image，因为我想渲染Image的整个宽度。如何实现？我期望完全像这样

但是我得到的是这个

以下是我的代码

已更新

              

Grid

样式

height

未加载图像的全宽，如何在不添加 <Col size={33.33}> <TouchableOpacity onPress ={() => this.props.navigation.navigate("Header")}> <Image source={require('../../imgs/eco.jpg')} style={styl.image} /> </TouchableOpacity> </Col> <Col size={33.33}> <TouchableOpacity onPress ={() => this.props.navigation.navigate("Footer")}> <Image source={require('../../imgs/file.jpg')} style={styl.image} /> </TouchableOpacity> </Col> <Col size={33.33}> <TouchableOpacity onPress ={() => this.props.navigation.navigate("NHBadge") }> <Image source={require('../../imgs/economy.jpg')} style={styl.image} /> </TouchableOpacity> </Col> </Row> </Grid> 和col:{ flex:1, margin:5, width:120, height:200 }, col2:{ flex:1, padding:90, backgroundColor:"#ddd", alignItems:'center', margin:5, height:200, width:120, }, image:{ flex:1, position: 'absolute', justifyContent: 'center', alignItems: 'center', }, textStyle:{ color:'white', fontSize:15, fontWeight:'bold', alignSelf:'center' }, viewStyle:{ position: 'absolute', justifyContent: 'center', alignItems: 'center', top: 0, left: 0, right: 0, bottom: 0 }, 属性的情况下使3列适合屏幕显示？请帮助我找出代码中的错误。帮助将是非常感谢的。谢谢

Answer 1

尝试

resizeMode: 'contain', 

以图像样式显示全角