REACT NATIVE 如何使用滚动视图突出显示项目并 increment/decrement 突出显示的项目？

Question

我正在构建一个 'Initiative Tracker' 供家庭使用。我的目标是默认突出显示列表顶部的第一项，并使用一个跟踪轮次的计数器来突出显示与其轮次相对应的项目。例如。按下“+”按钮时，下一项应突出显示，前一项应 return 正常。我目前正在使用 map 函数来显示数组。我觉得应该有一种方法可以使用索引和样式来实现我想要的，但到目前为止我没有运气。

在此先感谢您的帮助或建议！

相关代码如下：

let Encounter1Array = [
  { name: "goblin1", init: 5 },
  { name: "goblin2", init: 8 },
  { name: "goblin3", init: 15 },
  { name: "goblin4", init: 3 },
  { name: "goblin5", init: 9 },
];

function InitiativeTrackerScreen() {
  const [encounter, setEncounter] = useState(Encounter1Array);
  encounter.sort(function (x, y) {
    return y.init - x.init;
  });
  return (
    <KeyboardAvoidingView style={styles.wrapper}>
      <ScrollView>
        {encounter.map((item, index) => {
          return (
            <View key={index}>
              <TouchableOpacity style={styles.ItemDisplayContainer}>
                <View>
                  <View>
                    <Text style={{ fontStyle: "italic", fontSize: 16 }}>
                      {item.name}
                    </Text>
                  </View>
                  <View>
                    <Text style={{ fontSize: 12 }}>
                      Initiative: {item.init}
                    </Text>
                  </View>
                </View>
              </TouchableOpacity>
            </View>
          );
        })}
      </ScrollView>
    </KeyboardAvoidingView>
  );
}

Answer 1

您需要额外的状态来跟踪要突出显示的元素的索引。然后你可以使用条件语句匹配到正确的索引并切换其样式。

const P = ({ list }) => {
  const [current, setCurrent] = useState(0);

  return list.map((item, i) => 
    <View style={i === current ? highlightStyle : style}>
      <Button onPress={() => setCurrent(current + 1)}>
        {"+"}
      </Button>
      {item}
    </View>
  );
};

REACT NATIVE 如何使用滚动视图突出显示项目并 increment/decrement 突出显示的项目？

REACT NATIVE How can I highlight an item with a scrollview and increment/decrement the highlighted item?

highlight

react-native