Здравствуйте. Я пытаюсь создать фиксированный (отзывчивый) вид сетки с 3 столбцами в каждой строке. В каждом столбце будет изображение и, нажав на него, оно перейдет на соответствующую страницу. Я использую native-base ui kit
Я нашел простой способ создания вида сетки в их документации. Но проблема в том, что когда я пытался указать изображение в столбце, полная ширина изображения не загружается, и когда я вынимаю в разных телефонах, вид сетки не реагирует.Причина в том, что я установил свойство высоты и ширины равным col
компоненту 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 столбца помещались на экране, не добавляя свойства height
и width
? Пожалуйста, помогите мне разобраться в ошибке в моем коде. Любая помощь будет очень полезной. Спасибо