React Native: ZIndex с динамическими представлениями - PullRequest
Новая
       18

React Native: ZIndex с динамическими представлениями

0 голосов
/ 15 октября 2018

Я новичок в React Native и пытаюсь создать приложение, в котором я представляю подробный обзор своему пользователю.Я строю этот плиточный обзор с помощью FlatList с 3 столбцами.Мне нужно, чтобы все выглядело так, как будто все предметы висят на веревке, которая проходит вертикально за плитками, которые у меня есть, и я пытаюсь добиться этого, установив Z-Index моего представления "item" равным 1000 и zIndex моего«веревочный» вид на 1. См. пример ниже:

enter image description here

код моей ячейки выглядит следующим образом: 

export default class ItemButton extends Component {

  //

render() {
    const { item, style, onPress } = this.props
    console.log('style for itemButton: ', style)
    return (
        <TouchableOpacity style={style} onPress={onPress}>
            <Image style={{zIndex:1000, width: style.width, height: style.height}} resizeMode={'contain'} source={require('../Artwork/Items/cta-enter.png')}></Image>
            <Image style={{top: -Math.abs(style.height + 100), height: 200, width: 30, zIndex:1, alignSelf: 'center'}} source={require('../Artwork/Items/rope.png')} resizeMode={'contain'}></Image>
        </TouchableOpacity>        
    );
  }
}

И я реализую это в моем FlatList следующим образом: 

renderCollectionItem(item) {
    return <ItemButton item={item} style={styles.buttonStyle} onPress={() => this.collectionItemPressed(item)} />
  }

render() {
return (
   <FlatList
  style={{width: collectionViewWidth, flexDirection: 'row', overflow: 'visible', top: this.props.style.top}}
  contentContainerStyle={[{left: this.props.horizontalSpacing / 2}, internalStyles.collectionViewContentStyle]}
  data = { this.convertToIndexed(this.props.items) }
  renderItem = {({item}) => (
    this.renderCollectionItem(item[0])
  )}
  numColumns={(3)}
  key={(Helpers.isPortrait() ? this.state.portraitRowSize : this.state.landscapeRowSize)}
  keyExtractor={(item, index) => index.toString()}
/>
);
}

Однако это не работает, так как React-Native всегда размещает представления, которые отображаются позже, с более высоким Z-индексом.

Вопрос: Как мне настроить мой FlatList для получения нужного мне результата, как показано на рисунке выше?

1 Ответ

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

к сожалению реакция-нативный не поддерживает z-index. Я столкнулся с той же проблемой с динамическим компонентом, решение было использовать свойство Elevation в стиле обоих элементов, вот хитрость:

  • задайте элемент, который вы хотите, чтобы он находился на верхнем более высоком возвышении, скажем, 15.
  • укажите другой элемент, который вы хотите быть нижним, по сравнению с другим элементом, более низким, например, 5.результат будет именно тем, что вы хотите ..
...