Question

动态添加颜色到 LinearGradient

2020-11-26

371

react-native expo

我正在使用这些数据来填充 FlatList，每个项目都包含一个 LinearGradient

const DATA = [
  {
    id: 'bd7acbea-c1b1-46c2-aed5-3ad53abb28ba',
    title: 'First Item',
    firstColor: "#f472a7",
    secondColor: "#d84351"
  },
  {
    id: '3ac68afc-c605-48d3-a4f8-fbd91aa97f63',
    title: 'Second Item',
    firstColor: "#50be71",
    secondColor: "#50be71"
  },
  {
    id: '58694a0f-3da1-471f-bd96-145571e29d72',
    title: 'Third Item',
    firstColor: "#e2bd4f",
    secondColor: "#e49074"
  }
];

我添加了两个名为“firstColor”和“secondColor”的属性来填充 LinearGradient 颜色，但我在执行此操作时遇到了一些问题。我收到此错误：

TypeError: undefined is not an object (evaluating '_ref3.secondColor')

代码：

const Item = ({ title }, { firstColor }, { secondColor }) => (
        <LinearGradient
        colors={[{firstColor}, {secondColor} ]}
        style={styles.item}
        >
          <Text style={styles.title}>{title}</Text>
        </LinearGradient>
      );
      
      const renderItem = ({ item }) => (
        <Item title={item.title} />
      );
...

        <SafeAreaView style={styles.container}>
        <FlatList
          data={DATA}
          renderItem={renderItem}
          keyExtractor={item => item.id}
        />
      </SafeAreaView>

Answer 1

尝试一下

const Item = ({ title,  firstColor, secondColor}) => (
  <LinearGradient
    colors={[firstColor, secondColor ]}
    style={styles.item}
  >
    <Text style={styles.title}>{title}</Text>
  </LinearGradient>
);
      
const renderItem = ({ item}) => (
  <Item 
    firstColor={item.firstColor } 
    secondColor={ item.secondColor } 
    title={item.title} 
  />
);

Answer 2

const LinearGradient = ({ color, firstColor, secondColor }) => {
const colorArr = [firstColor, secondColor];
return (
  <View>
    <Text>{color}</Text>
    <Text>{firstColor}</Text>
    <Text>{secondColor}</Text>
  </View>
);

};

您可以尝试一下吗，您传递数据的方式是错误的。我在类似的例子中做了一些更改。