Question

React-native遇到问题，我有一个使用AnimatedTimer组件的组件TouchTimer。该计时器应该在它被点击时启动和停止，但确实如此，但是我添加到页面的所有TouchTimer组件都会在它们被点击时启动和停止，而不仅仅是影响被点击的组件。

下面是我的组件的片段：

TouchTimer.tsx

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>
    )
  }
}

这是包含以下组件的屏幕摘要：

Details.tsx

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}
        />
      )}
    />
  )
}

我尝试将TouchTimer组件包装在View中，并将paused布尔值更改为prop，但无济于事。

我还测试了当组件不是同级组件时以及是否由于回调而没有产生组件时是否出现此问题，并且在这两种情况下问题仍然存在。

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

Answer 1

奇怪的是，该组件似乎是通过适用于所有组件实例的全局pauseFlag来实现的。参见https://github.com/dalisalvador/react-native-animated-timer/blob/master/src/Components/AnimatedTimer.js#L34

因此，我认为您在这里没有做错任何事情，这是库代码的局限性，该代码将计时器的所有实例耦合到相同的pauseFlag值。

React Native组件似乎正在共享状态

TouchTimer.tsx

Details.tsx

1 个答案: