尝试为 JSON 中的两个项目设置不同的样式

Question

我尝试构建一个在 MainPage 上显示新闻项目概览的新闻应用程序。前 3 项需要使用 FlatList 呈现为与其余项不同。

第一项是 100% 的背景图像，上面有一些文字（这样做的原因是：if index === 0））
第二项和第三项需要是标题连续的背景图片（因此彼此相邻）
其余的是一个列表，其中包含图像、标题和日期（彼此在下方）

我尝试了所有方法，但第 2 项和第 3 项不起作用。

尝试过这个小的基本测试：

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 个部分，其中包括

第一项
第二项和第三项
其余项目（使用 FlatList 渲染这部分）

最后，您可以用不同的方式显示这 3 个部分。但请确保将第 1 部分和第 2 部分显示为 FlatList 的 ListHeaderComponent。

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"
    },
});

希望对您有所帮助。有疑问欢迎留言。

尝试为 JSON 中的两个项目设置不同的样式

Trying to set different styles on two items from JSON

javascript

react-native

react-native-sectionlist