如何在 React Native 中为 scrollView 中的相同按钮赋予不同的样式？

Question

我正在创建一个滚动视图，在其中放置了一些按钮，并且随着 btns 滚动，我希望它们的不透明度发生变化，我在滚动视图中使用 flatList 来访问数据。这是我的代码。

<ScrollView style={styles.btnScroll}>
        <FlatList
         style={styles.listView}
         data={STATIC_LIST}
         renderItem={this.renderbtns}
         ListFooterComponent={() => (
              <View style={styles.bottomSpacing} />
         )}
         showsVerticalScrollIndicator={false}
         keyExtractor={item => item.id}
        />
</ScrollView>

& 用于 renderbtns ：

  renderbtns = ({item}) => {
    return (
      <View>
        <TouchableOpacity>
          <Text style={styles.BtnText}>{item.name}</Text>
        </TouchableOpacity>
      </View>
    );
  };

我一次在 scrollView 中显示 5 个按钮，并且我希望第 1 和第 5 个 btn 到不透明度 0.2，第 2 和第 4 个 btn 到不透明度 0.5 和第 3 个 btn 到不透明度 1。

Answer 1

您可以使用索引属性，然后检查索引并创建条件

renderbtns = ({item, index}) => {
    const opacityCondition = () => {
      if (index === ????) {
        return 0.6
      }
      \\ make other conditions
      return 0.8
    }
    return (
      <View>
        <TouchableOpacity style={{opacity: opacityCondition(}}>
          <Text style={styles.BtnText}>{item.name}</Text>
        </TouchableOpacity>
      </View>
    );
  };