Question

我有这个类用于闪烁文本：

class BlinkerFluid extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      isShowingText: true,
      TextInputName = ''
    };

    setInterval(() => {
      this.setState(previousState => {
        return { isShowingText: !previousState.isShowingText };
      });
    }, 700);
  }
  render () {
    let display = this.state.isShowingText ? this.props.text : '   ';
    return (
      <Text style={styles.other}>{display}</Text>
    );
  }
}

此类用于呈现闪烁的文本：

 export default class App extends React.Component {
  constructor(props) {
    super(props);
    this.state = { text: 'x' };
  }
  render() {
    return (
      <View style={styles.container}>
      <Text style={styles.other}>$ root | &gt; </Text>
      <BlinkerFluid text=' _' />
      <TextInput style={styles.lol}
      onChangeText={(text) => this.setState({text})}
      value={this.state.text}
    />
  </View>

);
}
}

我希望能够在单击TextInput道具和/或写入文本时停止文本的闪烁。我该怎么做呢？我一直在努力寻找自己的答案，阅读文档，但没有任何帮助。任何帮助表示赞赏！

Answer 1

您可以尝试类似下面的代码段（我只包含App的代码。您可以根据需要在paused中实现BlinkerFluid功能。

基本上，我在状态中存储是否应该暂停闪烁，然后将该值作为道具传递给BlinkerFluid组件。您可以轻松设置pauseBlinker状态，可能在示例中的onChangeText上，或者按TouchableOpacity元素等。

export default class App extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      text: 'x',
      pauseBlinker: false,
    };
  }
  render() {
    return (
      <View style={styles.container}>
        <Text style={styles.other}>$ root | &gt; </Text>
        <BlinkerFluid text=' _' paused={this.state.pauseBlinker} />
        <TextInput style={styles.lol}
        onChangeText={(text) => this.setState({ text, pauseBlinker: true, })}
        value={this.state.text}
        />
      </View>
    );
  }
}

如何通过单击TextInput禁用某个功能

1 个答案: