Question

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

这是我想要实现的截图。 App homescreen

我的代码：

 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]}}>

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

好的完整示例，我从反应原生文档获得了这一点并进行了一些编辑。我希望你明白这一点。

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);

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

1 个答案: