React-Native: обратный zIndex в FlatList - PullRequest
Новая
       15

React-Native: обратный zIndex в FlatList

0 голосов
/ 09 февраля 2019

У меня есть FlatList с некоторыми элементами, где верхний элемент должен перекрывать нижний элемент.Для этого я хотел отменить zIndex, но FlatList продолжает перезаписывать мой zIndex.

В приведенном ниже коде я пытался отменить zIndex с помощью zIndex: 0 - index, но он не работает 

import React, { Component } from "react";
import { FlatList, Text, View, StyleSheet } from "react-native";

export default class App extends React.Component {
  _renderPost({ index }) {
    return <View style={[styles.item, { zIndex: 0 - index, }]} />;
  }
  render() {
    return <FlatList data={[1, 2, 3, 4, 5,]} renderItem={this._renderPost} />;
  }
}

const styles = StyleSheet.create({
  item: { 
    height: 200, 
    borderWidth:2, 
    borderBottomLeftRadius:50, 
    borderBottomRightRadius:50, 
    marginBottom: -50, 
    backgroundColor:"white",
  },
});

ссылка на Expo Snack

output

1 Ответ

0 голосов
/ 09 февраля 2019

Мне не удалось сделать это с помощью zIndex, так как проблема, кажется, устанавливает zIndex из индекса, это просто не работает.

Способ, которым мне удалось это сделатьэто было бы путем инвертирования FlatList и использования стиля для инвертированного направления изгиба столбца, чтобы он также прокручивался вверх.Обратите внимание, что это также эффективно отображает сообщения в обратном порядке, поэтому для достижения желаемых результатов необходимо будет перевернуть лежащие в основе массивы 

import React, { Component } from "react";
import { FlatList, Text, View, StyleSheet } from "react-native";

export default class App extends React.Component {
  _renderPost({ index }) {
    return <View style={styles.item} />;
  }
  render() {
    return <FlatList style={styles.container} inverted data={[1, 2, 3, 4, 5,]} renderItem={this._renderPost}/>;
  }
}

const styles = StyleSheet.create({
  item: { 
    height: 200, 
    borderWidth:2, 
    borderBottomLeftRadius:50, 
    borderBottomRightRadius:50, 
    marginBottom: -50, 
    backgroundColor:"white",
  },
  container: {
    flexDirection: 'column-reverse'
  }
});
...