React native React本机组件似乎正在共享一个状态

我对React native有一个问题，我有一个使用组件的组件TouchTimer。这个计时器应该在点击时启动和停止，但我添加到页面中的所有TouchTimer组件都会在点击任何一个时启动和停止，而不仅仅影响点击的组件

下面是我的组件的一个片段：

TouchTimer.tsx 下面是包含以下组件的屏幕片段：

Details.tsx 我尝试过在视图中包装TouchTimer组件，并将暂停的布尔值更改为道具，但没有效果

我还测试了当组件不是同级组件时，以及当它们不是回调的结果时，是否会出现此问题，并且在这两种情况下问题仍然存在

---

如果有人对如何使这些计时器独立有任何建议或答案，我将非常感谢

奇怪的是，该组件似乎是通过一个适用于所有组件实例的全局pauseFlag实现的。看

---

所以我不认为您在这里做错了什么，这是库代码的一个限制，它将计时器的所有实例耦合到相同的pauseFlag值。

哦，这太令人沮丧了！您对如何修改组件或使用不同的方法来实现类似结果有何建议？

export class TouchTimer extends React.Component<TouchTimerProps> {
  state: {
    ...
    paused: boolean,
  }

  constructor(props) {
    super(props);
    ...
    this.state = {
      ...
      paused: true,
    }
  }

  startStop() {
    this.setState({paused: !this.state.paused});
  }

  render() {
    const { time } = this.props;
    return (
      <TouchableHighlight onPress={() => this.startStop()}>
        <View>
          <AnimatedTimer
            ...
            time={time}
            pause={this.state.paused}
          />
          <View style={styles.timeContainer}>
            <Text style={styles.time}>{this.state.remaining}</Text>
          </View>
        </View>
      </TouchableHighlight>
    )
  }
}

import { TouchTimer } from '../components/TouchTimer';
...
export class RecipeDetailsScreen extends React.Component<NavigationInjectedProps> {
...
  {this.state.steps.map(step => (
    <List.Item
      key={step.id}
      title={"Step " + step.index}
      style={styles.step}
      description={step.short_desc}
      right={() => (step.time > 0 &&
        <TouchTimer
          time={step.time * 60000}
        />
      )}
    />
  )
}