如何处理数组呈现的组件中一个元素/索引的样式？

Question

我需要根据一些参数处理组件中元素的样式。

我有此代码：

<View>
  {assignedPassengersData.map((info, index) => (
    <View
      key={info.id}
      opacity={info.id === passengerCardId ? 1 : 0.5}
    >
      <PassengersInfo
        id={info.id}
        buttonText={
          passengerCardId === info.id ? 'CONFIRM DROPOFF' : 'START NAVIGATING'
        }
        btnStyle={[
          passengerCardId === info.id
            ? { backgroundColor: '#263238' }
            : navigationStore.index
            ? { backgroundColor: Colors.pickupTabColor }
            : { backgroundColor: Colors.dropOffTabColor },
        ]}
      />
    </View>
  ))}
</View>

我需要处理的道具是opacity。

这里：

opacity={info.id === passengerCardId ? 1 : 0.5}

我现在拥有代码的方式仅在满足该条件时才有效，因此我可以使用opacity: 1看到所需的元素。因此，其余元素始终具有opacity: 0.5。我需要在加载应用程序时，所有内容都应具有opacity: 1。仅在满足条件的元素中，info.id === passengerCardId的不透明度何时设置为1。然后，其余元素的不透明度应设置为0.5。

那么，我怎样才能实现我所需要的？