React-Native将颜色数组传递给FlatList

Question

我是React-Native的新手，我一直试图将颜色数组作为背景色传递给FlatList组件的组件。 （希望这是有道理的）

这是我要实现的屏幕截图。 应用主屏

我的代码：

 class TubeFetch extends Component {
state = {
    lineDetails: [],
    colors: [
        "#994F14",
        "#DA291C",
        "#FFCD00",
        "#007A33",
        "#EB9CA8",
        "#7C878E",
        "#8A004F",
        "#000000",
        "#10069F",
        "#00a3e0",
        "#4CC1A1"
    ]
};

componentDidMount() {
    this.fetchData();
}

fetchData() {
    axios
        .get("https://api.tfl.gov.uk/line/mode/tube/status")
        .then(response => this.setState({ lineDetails: response.data }));
}

render() {
    const { nameStyle, statusStyle } = styles;

    return (
        <View>
            <FlatList
                data={this.state.lineDetails}
                keyExtractor={(item, index) => index}
                renderItem={({ item }) => (
                    <TubeCard>
                        <CardSectionTitle
                            style={{ backgroundColor: this.state.colors }}
                        >
                            <Text style={nameStyle}>{item.name}</Text>
                        </CardSectionTitle>
                        <CardSectionStatus>
                            <Text style={statusStyle}>
                                {
                                    item.lineStatuses[0]
                                        .statusSeverityDescription
                                }
                            </Text>
                        </CardSectionStatus>
                    </TubeCard>
                )}
            />
        </View>
    );
}
}

尽管上面没有提供任何错误，但是我的CardSectionTitle仍然是白色的backgroundColor。 有人可以指出我正确的方向。

谢谢。

Answer 1

每次在您的代码中，您将获得相同的颜色，大概是第一个。 您应该使用索引值来获取列表中项目的不同背景色。 就像是

<CardSectionTitle style={{backgroundColor: this.state.colors[this.state.lineDetails.indexOf(item)%this.state.colors.length]}}>

会帮助你的。 请记住，您正在为每个单元格编写类似的for循环，是的，您的方向正确。

好的完整示例，我是从React本机文档中得到的，并进行了一些编辑。 我希望你明白这一点。

import React, { Component } from 'react';
import { AppRegistry, FlatList, StyleSheet, Text, View } from 'react-native';
const colors= [
        '#994F14','#DA291C','#FFCD00','#007A33','#EB9CA8', '#7C878E',
        '#8A004F','#000000','#10069F','#00a3e0','#4CC1A1'
]
export default class FlatListBasics extends Component {
  render() {
    return (
      <View style={styles.container}>
        <FlatList
          data={[
            {key: 'Devin'},
            {key: 'Jackson'},
            {key: 'James'},
            {key: 'Joel'},
            {key: 'John'},
            {key: 'Jillian'},
            {key: 'Jimmy'},
            {key: 'Julie'},
          ]}
          renderItem={({item,index}) => <Text style={[styles.item,{backgroundColor:colors[index%colors.length]}]}>{item.key}</Text>}
        />
      </View>
    );
  }
}

const styles = StyleSheet.create({
  container: {
   flex: 1,
   paddingTop: 22
  },
  item: {
    padding: 10,
    fontSize: 18,
    height: 44,
  },
})

// skip this line if using Create React Native App
AppRegistry.registerComponent('AwesomeProject', () => FlatListBasics);