Попытка установить разные стили для двух элементов из JSON

Question

Я пытаюсь создать новостное приложение, которое показывает на главной странице обзор новостных сообщений. Первые 3 элемента должны отображаться иначе, чем остальные, с использованием FlatList.

• Первый элемент - это 100% фоновое изображение с текстом на нем (сделал это с помощью: if index === 0 ))
• Вторым и третьим элементом должны быть фоновые изображения с заголовками в строке (расположенные рядом друг с другом)
• Остальные - это список с изображением, заголовком и датой (внизу) друг друга)

Я пробовал все, но пункты 2 и 3 не работают.

Пробовал с этим небольшим тестом c:

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

export default class Screen1 extends Component {
  state = {
    data: [
      {
        text: "one"
      },
      {
        item1: {
          text: "two"
        },
        item2: {
          text: "three"
        }
      },
      {
        item1: {
          text: "four"
        },
        item2: {
          text: "five"
        }
      },
      {
        item1: {
          text: "six"
        }
      }
    ]
  };

  renderItem = ({ item, index }) => {
    if (index === 0) {
      return (
        <View style={styles.bigSquare}>
          <Text> {item.text} </Text>{" "}
        </View>
      );
    } else if (index > 0 || index <= 3) {
      return (
        <View
          style={{
            flexDirection: "row"
          }}
        >
          {" "}
          {item.item2 && (
            <View
              style={[
                styles.smallSquare,
                {
                  backgroundColor: "red"
                }
              ]}
            >
              <Text> {item.item2.text} </Text> <Text> {item.item2.text} </Text>{" "}
            </View>
          )}{" "}
        </View>
      );
    }
  };

  keyExtractor = (item, index) => `${index}`;

  render() {
    return (
      <View style={styles.container}>
        <FlatList
          data={this.state.data}
          renderItem={this.renderItem}
          keyExtractor={this.keyExtractor}
        />{" "}
      </View>
    );
  }
}

const styles = StyleSheet.create({
  container: {
    flex: 1
  },
  bigSquare: {
    flexDirection: "column",
    height: 220,
    width: "100%",
    margin: 10,
    backgroundColor: "yellow",
    justifyContent: "center",
    alignItems: "center"
  },
  smallSquare: {
    height: 100,
    width: 100,
    margin: 10,
    backgroundColor: "green",
    justifyContent: "center",
    alignItems: "center"
  }
});

Может кто-то указывает мне правильное направление?

Пример:

Answer 1

Этот подход немного отличается. Разделите ваш список на 3 части, которые включают

1. Первый элемент
2. Второй и третий элементы
3. Остальные элементы (используйте FlatList для визуализации этой части)

Наконец, вы можете отобразить эти 3 части по-разному. Но не забудьте отобразить части 1 и 2 как ListHeaderComponent FlatList.

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

const ScreenWidth = Dimensions.get('window').width;

const DATA = [
    {
        id: "1",
        title: "First Item"
    },
    {
        id: "2",
        title: "Second Item"
    },
    {
        id: "3",
        title: "Third Item"
    },
    {
        id: "4",
        title: "Forth Item"
    },
    {
        id: "5",
        title: "Fifth Item"
    },
    {
        id: "6",
        title: "Sixth Item"
    },
    {
        id: "7",
        title: "Seventh Item"
    }
];

export default class Example extends Component {

    renderHeader = () => (
        <View>
            {/* Display index === 0 item */}
            <View style={styles.bigSquare}>
                <Text>{DATA[0].title}</Text>
            </View>

            {/* Display index > 0 && index < 3 items */}
            <View style={{ flexDirection: 'row' }}>
                <View style={styles.middleSqure}>
                    <Text>{DATA[1].title}</Text>
                </View>
                <View style={styles.middleSqure}>
                    <Text>{DATA[2].title}</Text>
                </View>
            </View>
        </View>
    )

    renderItems = ({ item }) => (
        <View style={styles.smallSquare}>
            <Text>{item.title}</Text>
        </View>
    );

    render() {
        return (
            <SafeAreaView style={{flex: 1, marginTop: 20}}>

                {/* Display rest of item in a FlatList */}
                <FlatList
                    data={DATA.slice(2)}
                    renderItem={this.renderItems}
                    ListHeaderComponent={this.renderHeader}
                    keyExtractor={item => item.id}
                />
            </SafeAreaView>
        );
    }
}

const styles = StyleSheet.create({
    bigSquare: {
        height: 220,
        width: ScreenWidth - 20,
        margin: 10,
        backgroundColor: "yellow",
        justifyContent: "center",
        alignItems: "center"
    },
    middleSqure: {
        height: (ScreenWidth - 40) / 2,
        width: (ScreenWidth - 40) / 2,
        margin: 10,
        backgroundColor: "red",
        justifyContent: "center",
        alignItems: "center"
    },
    smallSquare: {
        height: 100,
        width: 100,
        margin: 10,
        backgroundColor: "green",
        justifyContent: "center",
        alignItems: "center"
    },
});

Надеюсь, это вам поможет. Не стесняйтесь сомнений.