Как сделать фиксированный вид сетки с изображением в столбце в реагировать родной? - PullRequest
0 голосов
/ 14 декабря 2018

Здравствуйте. Я пытаюсь создать фиксированный (отзывчивый) вид сетки с 3 столбцами в каждой строке. В каждом столбце будет изображение и, нажав на него, оно перейдет на соответствующую страницу. Я использую native-base ui kitЯ нашел простой способ создания вида сетки в их документации. Но проблема в том, что когда я пытался указать изображение в столбце, полная ширина изображения не загружается, и когда я вынимаю в разных телефонах, вид сетки не реагирует.Причина в том, что я установил свойство высоты и ширины равным col компоненту Grid. Но если я не установлю высоту, то ничего не будет отображаться, я получу пустую страницу. Также я не установил height к изображению, потому что я хочу отрендерить всю ширину изображения. Как мне этого добиться?Я ожидаю точно так же, как это

enter image description here

Но я получаю это

enter image description here

Ниже приведен мой код

обновлен

           <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? Пожалуйста, помогите мне разобраться в ошибке в моем коде. Любая помощь будет очень полезной. Спасибо

1 Ответ

0 голосов
/ 16 декабря 2018

попробуйте

resizeMode: 'contain', 

в вашем стиле изображения для полной ширины

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...