Question

有什么方法可以使模态在没有压迫的情况下在几秒钟后独自消失？我尝试在没有“ ENTER”按钮的情况下2秒钟后用动画消失模态。我尝试做animationOutTiming={1000}和backdropTransitionOutTiming={4000}，但它并不会消失。

我应该怎么做？

这是我的示例代码：

export default class Example extends Component {
  constructor(props) {
    super(props);
    this.state = {
      visibleModal: 3,
      azureLoginObject: {},
      loginSuccess: false
    };
    this.azureInstance = new AzureInstance(credentials);
    this._onLoginSuccess = this._onLoginSuccess.bind(this);
  }

  _renderButton = () => (
    <TouchableOpacity
      onPress={() => this.setState({ visibleModal: false })}>
      <LinearGradient
        colors={['#4c669f', '#3b5998', '#192f6a']}
        style={{
          height: 80,
          width: 180,
          borderRadius: 10,
          backgroundColor: "#2196F3",
          justifyContent: 'center',
          alignItems: 'center',
          marginTop: 50,
        }}>
        <Text style={{ color: 'white', fontSize: 20, fontWeight: 'bold' }}>ENTER</Text>
      </LinearGradient>
    </TouchableOpacity>

  );

  _onLoginSuccess() {
    this.azureInstance.getUserInfo().then(result => {
      this.setState({
        loginSuccess: true,
        azureLoginObject: result,
      });
      console.log(result);
    }).catch(err => {
      console.log(err);
    })
  }

  renderWelcomeMsg = (currentTime = new Date()) => {
    const currentHour = currentTime.getHours()
    const splitAfternoon = 12; // 24hr time to split the afternoon
    const splitEvening = 17; // 24hr time to split the evening

    if (currentHour >= splitAfternoon && currentHour <= splitEvening) {
      return 'צהריים טובים,';
    } else if (currentHour >= splitEvening) {
      return 'ערב טוב,';
    }
    return 'בוקר טוב,';
  }
  render() {
    if (!this.state.loginSuccess) {

      return (
        <AzureLoginView
          azureInstance={this.azureInstance}
          onSuccess={this._onLoginSuccess}
        />)
    }

    if (this.state.visibleModal === 3) {
      const { givenName } = this.state.azureLoginObject;
      const { userPrincipalName } = this.state.azureLoginObject;
      storeService.saveItem('userPrincipalName', userPrincipalName)

      return (

        <View style={styles.container}>

          <Modal
            isVisible={this.state.visibleModal === 3}
            animationInTiming={1000}
            animationOutTiming={1000}
            backdropTransitionInTiming={4000}
            backdropTransitionOutTiming={4000}
            animationIn={'flipInY'}
          >
            <LinearGradient
              colors={['#43D4FF', 'white']}
              style={{ borderRadius: 10 }}>
              <View style={styles.modalContent}>
                <Text style={{
                  fontWeight: "bold",
                  fontSize: 35,
                  justifyContent: 'center',
                  alignItems: 'center',
                }}>{this.renderWelcomeMsg()} {givenName}
                </Text>
                <View style={styles.buttonContainer}>
                  {this._renderButton()}
                </View>
              </View>
            </LinearGradient>
          </Modal>
        </View>
      );
    }
    return (
      <PlacesNavigator />
    );
  }
}

Answer 1

为什么模态显示几秒钟后状态发生变化后不开始超时？

setTimeout(() => {
  this.setState({ visibleModal: false});
}, 3000) // 3 seconds

一旦渲染了模态，就开始

编辑：

假设下面是模态代码

    if (this.state.visibleModal === 3) {
      const { givenName } = this.state.azureLoginObject;
      const { userPrincipalName } = this.state.azureLoginObject;
      storeService.saveItem('userPrincipalName', userPrincipalName)

      // let's add the setTimeout
      setTimeout(() => {
        // or whatever the state is, that disables the modal for you
        this.setState({ visibleModal: false});
      }, 3000) // 3 seconds

      return (

        <View style={styles.container}>

          <Modal
            isVisible={this.state.visibleModal === 3}
            animationInTiming={1000}
            animationOutTiming={1000}
            backdropTransitionInTiming={4000}
            backdropTransitionOutTiming={4000}
            animationIn={'flipInY'}
          >
            <LinearGradient
              colors={['#43D4FF', 'white']}
              style={{ borderRadius: 10 }}>
              <View style={styles.modalContent}>
                <Text style={{
                  fontWeight: "bold",
                  fontSize: 35,
                  justifyContent: 'center',
                  alignItems: 'center',
                }}>{this.renderWelcomeMsg()} {givenName}
                </Text>
                <View style={styles.buttonContainer}>
                  {this._renderButton()}
                </View>
              </View>
            </LinearGradient>
          </Modal>
        </View>
      );
    }

您可能需要考虑的事项：卸下组件后会发生什么？计时器仍将运行并尝试设置状态。

为了安全起见，请考虑清除卸载超时。

react native：几秒钟后模态会消失吗？

1 个答案: