更改仅单击视图而不是所有视图的样式

Question

我有一个 <TouchableWithoutFeedback> 包裹在一个封闭视图周围，我想在单击它时更改这个封闭视图的颜色，即 onPressIn ，但是所有视图的颜色都会改变，我的意思是映射视图，请问我怎样才能让 onPressIn 只改变那个特定视图的样式而不是全部的样式

const herbs = this.state.record.map(herb => (
  <TTouchableWithoutFeedback
    onPressIn={() => this.setState({ pressed: !this.state.pressed })}
    key={herb.id}
  >
    <View style={this.state.pressed ? BackStyles.herbBox : BackStyles.herb_box}>
      <Image
        style={BackStyles.image}
        source={{ uri: `${herb.name.replace(/ /g, "")}` }}
      />
      <View style={{ flexDirection: "column" }}>
        <Text style={BackStyles.header}>{herb.name}</Text>
        <Text style={BackStyles.sub}>{herb.bot}</Text>
      </View>
    </View>
  </TTouchableWithoutFeedback>
));

const BackStyles = StyleSheet.create({
  herb_box: {
    backgroundColor: "#fff",
    borderRadius: 7,
    marginTop: 10,
    marginBottom: 10,
    flexDirection: "row",
    width: "95%",
    alignSelf: "center"
    //   height: '2%'
    //  justifyContent: 'center',
  },
  herbBox: {
    backgroundColor: "#28B564",
    borderRadius: 7,
    marginTop: 10,
    marginBottom: 10,
    flexDirection: "row",
    width: "95%",
    alignSelf: "center"
  }
});

Answer 1

您必须跟踪通过map 创建的每个TTouchableWithoutFeedback 组件的布尔状态。

不要将pressed 用作布尔值，而是将其变成一个对象以跟踪每个组件。

类似的东西。

class App extends Component {
  state = {
    pressed: {}
  };

  handlePressedIn = i => {
    this.setState(prevState => {
      const pressed = { ...prevState.pressed };
      pressed[i] = !pressed[i];
      return { pressed };
    });
  };

  render() {
    const herbs = this.state.record.map((herb, i) => (
      <TTouchableWithoutFeedback
        onPressIn={() => this.handlePressedIn(i)}
        key={herb.id}
      >
        <View
          index={i}
          style={
            this.state.pressed[i] === i && this.state.pressed
              ? BackStyles.herbBox
              : BackStyles.herb_box
          }
        >
          <Image
            style={BackStyles.image}
            source={{ uri: `${herb.name.replace(/ /g, "")}` }}
          />
          <View style={{ flexDirection: "column" }}>
            <Text style={BackStyles.header}>{herb.name}</Text>
            <Text style={BackStyles.sub}>{herb.bot}</Text>
          </View>
        </View>
      </TTouchableWithoutFeedback>
    ));
    return <div>{herbs}</div>;
  }
}

---

更新

这里是解释代码如何工作的补充说明。
由@Aravind S提问

您能否在回答中澄清我的疑问？按下是一个对象 press: {} 并在 handlePressedIn 你做的pressed[i] = !按下[i];其中 i 是视图的索引...它是一个数组 那么……对吧？你返回一个对象数组吗？那么它是如何工作的呢？

pressed[i] 在用户第一次点击时最初是undefined。 但是!undefined 返回true，所以pressed[i] 的初始值将是true。

pressed: {} 被初始化为一个对象，只存储需要的数据。
如果它被初始化为数组pressed: []，那么undefined 值会浪费空间。

基本上return { clicked } 返回一个以位置（索引）为键的对象/字典。

工作演示