0

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

  • 第一项是 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"
  }
});

有人可以指出我正确的方向吗？

例子：

我需要的例子

4

1 回答 1

0

这种方法有点不同。将您的列表分为 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"
    },
});

希望这对您有所帮助。随意怀疑。

于 2020-03-06T08:48:32.677 回答