如何在反应原生的单个按钮上一个接一个地调用多个 function

Question

I am new to react native. I have a single button. and I have 3 functions. so I want that when user click on first time then first function should be call. when user click on 2nd time then 2nd function should be call. when user click on 3rd time then 3rd function should be call. and when user click on 4th time then again first function should be call and so on. please help me. thanks.

here is my code

<View>
<Icon onPress={this.function} name="md-camera" size={30}/>
</View>

Answer 1

You need 4 functions for this and one counter. Forth function will choose your function.

   state = {
    count: 0
  };



_gateway=()=>{
   this.setState({
            count: this.state.count==3 ? 1 : this.state.count+1
        })
   if(this.state.count==1){
      _function1();
   }
   if(this.state.count==2){
      _function2();
   }
   if(this.state.count==3){
      _function3();
   }
}
_function1=()=>{

    }
_function2=()=>{

    }
_function3=()=>{

    }

and in button call the _gateway function on press

onPress{() => { this._gateway();}}

Answer 2

You have to maintain a count that how many times the functions has been triggered. And using that you can choose whether which function to execute when button presses.

Note: I hope that you are using class components because you mentioned onPress event with this keyword and also function name is equal to function .

Class components

constructor(props) {
    super(props);
    this.state = {
        triggerCount: 0
    };

    this.functionName = this.functionName.bind(this);
    this.function1 = this.function1.bind(this);
    this.function2 = this.function2.bind(this);
    this.function3 = this.function3.bind(this);
}

functionName() {
    switch (this.state.triggerCount) {
        case 0:
            this.function1();
            break;
        case 1:
            this.function2();
            break;
        case 2:
            this.function3();
            break;
    }

    this.setState({
        triggerCount: (this.state.triggerCount + 1) % 3
    });
}

function1() {
    // Your logic for function 1
}

function2() {
    // Your logic for function 2
}

function3() {
    // Your logic for function 3
}

render() {
    return (
        ...
        <View>
            <Icon onPress={this.functionName} name="md-camera" size={30}/>
        </View>
        ...
    )
}

or

Functional components

const [triggerCount, setTriggerCount] = useState(0);

const functionName = () => {
    switch (triggerCount) {
        case 0:
            function1();
            break;
        case 1:
            function2();
            break;
        case 2:
            function3();
            break;
    }

    setTriggerCount((triggerCount + 1) % 3);
}

const function1 = () => {
    // Your logic for function 1
}

const function2 = () => {
    // Your logic for function 2
}

const function3 = () => {
    // Your logic for function 3
}

return (
    ...
    <View>
        <Icon onPress={functionName} name="md-camera" size={30}/>
    </View>
    ...
);