React-native-router-flux scene render multiple times

问题

So I use react-native-router-flux and here is my scene

<Scene key="changePassword" component={ChangePassword} title="Change Password"/>

And I have this button which will route to that scene when clicked

<Button style={styles.button} onPress={() => Actions.changePassword()}>

If I click the button for many times, multiple scene will pop up.

Is there any way to prevent this? Thank you for your help guys :)

回答1:

you can try to give delay if the button has been clicked, put local state like this:

constructor() {
    super()
    this.state = {
      inClick: false
    }
  }

and add this function :

onClickButton = () => {
    this.setState({ inClick: true })
    Actions.register()
    setTimeout(function() { this.setState({inClick: false}); }.bind(this), 2000);
  }

and in your button should be like this :

<Button warning block style={styles.button} onPress={ !this.state.inClick ? this.onClickButton : null}>

Hope that can help you, thanks :)

回答2:

I think the only way is to disable the button if it has been clicked , there's a prop called disabled in react native button.

function handleButtonClick(){
  this.setState({ disabled: true });
  Actions.changePassword();
}


<Button onPress={()=> this.handleButtonClick()} disabled={this.state.disabled} />

来源：https://stackoverflow.com/questions/45616618/react-native-router-flux-scene-render-multiple-times