Question

我在平面列表中使用react native刷卡输出。我正在从Firestore的集合中提取数据。我想拉集合中的项目，并根据项目类型为项目应用颜色。例如，如果某人有汽车，那么它将是紫色，自行车将是绿色。我应用了if语句，然后基于if语句渲染方法。有人可以帮我解决我做错的事情吗？

if (collection.item.type == 'car') {
  let that = this;
    return (
      <View style={{marginTop: 20}}>
    {/* this is an empty view to space out the array items. was unable to figure out a more clever way to separate the views and keep the side buttons in line with the component.*/} 
      <Swipeout 
        key={collection.key}
        onOpen={(itemID, ) => {
          that.setState({
            itemID,
          });
        }}
        style={{backgroundColor: 'rgba(0,0,0,0)',}}
        right={swipeoutBtns}>
        <LinearGradient style={{justifyContent: 'center', borderRadius: 30, width: 250, height: 180, alignSelf: 'center'}} colors={['#ff00ff', '#0066ff']}>
                  <View style={{alignSelf: 'center', justifyContent: 'center', width: 60, height: 60, borderRadius: 60/2, backgroundColor: 'white'}}>
                      <Text style={{alignSelf: 'center'}}>
                      {car}
                      </Text>
                  </View>
                  <Text style={{fontWeight: 'bold', marginTop: 5, color: 'white', fontSize: 16, alignSelf: 'center', backgroundColor: 'rgba(0,0,0,0)',}}>
                    {collection.item.make}
                  </Text>
                  <Text style={{fontWeight: 'bold', marginTop: 5, color: 'white', fontSize: 16, alignSelf: 'center', backgroundColor: 'rgba(0,0,0,0)',}}>
                    {collection.item.model}
                  </Text>
                  <Text style={{fontWeight: 'bold', marginTop: 5, color: 'white', fontSize: 16, alignSelf: 'center', backgroundColor: 'rgba(0,0,0,0)',}}>
                    {collection.item.color}
                  </Text>
                  <Text style={{fontWeight: 'bold', marginTop: 5, color: 'white', fontSize: 16, alignSelf: 'center', backgroundColor: 'rgba(0,0,0,0)',}}>
                    {collection.item.year}
                  </Text>
                  <Text style={{fontWeight: 'bold', color: 'white', fontSize: 16, alignSelf: 'center', backgroundColor: 'rgba(0,0,0,0)',}}>
                    {collection.item.licensePlate}
                  </Text>
            </LinearGradient> 
      </Swipeout>
      </View>
    );
  }

Answer 1

我必须将item.key添加到密钥提取器道具中。我正在为有此问题的其他人回答。

keyExtractor = {（item，index）=> item.key}

数组唯一键中的每个孩子都具有响应本机滑动的能力

1 个答案: