изображение скрыто после абсолютной позиции в реакции - PullRequest
Новая
       7

изображение скрыто после абсолютной позиции в реакции

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

У меня есть вид и изображение, как это.

<View style={styles.popularImageViewContainer}>
     <Image style={styles.popularImageStyle} source={{uri: //imgURI }} />
</View>

<View style={styles.currentUserImageContainerStyle}>
     <Image style={styles.currentUserImageStyle} source={{uri://imgURI }} />
</View>

Это стиль, который я добавляю в них. 

currentUserImageContainerStyle:{
    minHeight:24,
    position: 'absolute',
    bottom:0,
    right:0
},
currentUserImageStyle: {
    height: 24,
    width: 24,
    borderRadius: 100,
}

Но изображение стиля "currentUserImageStyle" остается скрытым внизу.Я могу видеть изображение, когда я нажимаю на него, но я не могу видеть изображение в обычном режиме.Я не могу найти ничего подобного z-index в React Native, какую-либо помощь, которую я могу получить, используя абсолютную позицию и все еще видеть изображение?

РЕДАКТИРОВАНИЕ: Вот популярный стиль изображения, над которым я хочу, чтобы мой userImage .. 

  popularImageStyle: {
    height: 100,
    width: 100,
    borderRadius: 10,

  },
  popularImageViewContainer:{
    elevation: 3,
    borderRadius: 10,
    borderWidth: 1,
    borderColor: '#000',
  },

Ответы [ 3 ]

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

Проблема вызвана изображением .popularImageStyle или другими элементами в DOM?Ваш порядок просмотров требует, чтобы .currentUserImageStyle показывалось поверх другого изображения, поэтому проблема может быть вызвана откуда-то еще.

Согласно документации, существует zIndex * 1006.* реквизит, который можно использовать, но есть лучший способ достичь желаемого z-порядка, но при этом достаточно простой: просто переместите userImage View на после всех других элементов, которые должны предшествовать ему- элементы, отображаемые позже в иерархии, имеют приоритет над предыдущими, как это можно увидеть в следующем разделе: https://snack.expo.io/@siavas/stackoverflow-53970973

Если приведенное выше решение не относится к вам (в зависимости от вашей общей иерархии), простодобавьте в свой 1013 * реквизит zIndex, и он будет вести себя так же, как и в CSS: 

currentUserImageContainerStyle:{
    minHeight:24,
    position: 'absolute',
    bottom:0,
    right:0,
    zIndex: 1,
}
0 голосов
/ 30 декабря 2018

Возможно, это что-то напутало в вашем компоненте или в вашей функции render ().попробуйте удалить объекты, чтобы увидеть, где изображение начинает появляться.Это работает, https://snack.expo.io/rJrojU8-N Я сделал простой перекус, показывая, что то, что вы пытаетесь, работает так, как должно быть.Так что проблема не в этом

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

На самом деле, z-index определяется вами в функции render ().Порядок, в котором вы размещаете свои компоненты, определяет индекс z.Поскольку вы используете абсолютную позицию, попробуйте это 

<View style={styles.currentUserImageContainerStyle}>
           <Image style={styles.currentUserImageStyle} source={{uri://imgURI }} />
    </View>
<View style={styles.popularImageViewContainer}>
          <Image style={styles.popularImageStyle} source={{uri: //imgURI }} />
        </View>
...