react native how to call multiple functions when o

问题:

I am trying to call multiple functions when I click onPress using TouchableOpacity

For example:

functionOne(){
// do something
}

functionTwo(){
// do someting
}

<TouchableHighlight onPress{() => this.functionOne()}/>

What if I want to call two functions when onPress is clicked? Is there a way I could call multiple functions?

回答1:

There are a few ways to achieve this. One option would be to define a function that calls functionOne and functionTwo, and pass that on your onPress handler like so:

functionOne(){
// do something
}

functionTwo(){
// do something
}

functionCombined() {
    this.functionOne();
    this.functionTwo();
}  

<TouchableHighlight onPress={() => this.functionCombined()}/>

Alternatively, and more concisely, you could express functionCombined inline in your JSX like so:

functionOne(){
// do something
}

functionTwo(){
// do someting
}

<TouchableHighlight onPress={() => { this.functionOne(); this.functionTwo(); }/> 

回答2:

Recommended Solution:

   <TouchableWithoutFeedback
    onPress={() => {
     function1();
     function2();
    }}>     

You can use these props:

onPress Called when the touch is released

onPressIn Called as soon as the touchable element is pressed and invoked before onPress.

<TouchableWithoutFeedback
    onPress={() => {
      function1();
    }}
    onPressIn={() => {
      function2();
    }}
 >

回答3:

You can also make this with a boolean value. Example ;

<TouchableHighlight onPress{() => { this.functionOne() || this.functionTwo()}}/>

回答4:

Seeking your comment, you want to not used arrow, so I'm suggest to use something like this:

functionOne(){
// do something
}

functionTwo(){
// do someting
}

mixFunction=()=>{
functionOne();
functionTwo();
}

mixFuncWithoutArrow(){
functionOne();
functionTwo();
}

<TouchableHighlight onPress{this.mixFunction() || this.mixFuncWithoutArrow.bind(this)}/>