import React, {Component}from 'react';
import {
Platform,
? ? StyleSheet,
? ? Text,
? ? Image,
? ? View,
? ? TouchableOpacity,
? ? ToastAndroid,
}from 'react-native';
export default class srrowFunDemoextends Component {
constructor(props) {
super(props);
? ? ? ? this.state = {
data0:'點擊0',
? ? ? ? ? ? data1:'點擊1',
? ? ? ? ? ? data2:'點擊2',
? ? ? ? ? ? data3:'點擊3',
? ? ? ? ? ? data4:'點擊4',
? ? ? ? ? ? data5:'點擊5',
? ? ? ? ? ? date6:100,
? ? ? ? }
};
? ? //箭頭函數(shù)（無參）
? ? press0 = () => {
this.setState({
data0:"0被點擊了"
? ? ? ? });
? ? ? ? ToastAndroid.show('0被點擊了',ToastAndroid.SHORT);
? ? };
? ? //一般方法（無參）
? ? press1() {
this.setState({
data1:"1被點擊了"
? ? ? ? });
? ? ? ? ToastAndroid.show('1被點擊了',ToastAndroid.SHORT);
? ? };
? ? //一般方法（無參）
? ? press2() {
this.setState({
data2:"2被點擊了"
? ? ? ? });
? ? ? ? ToastAndroid.show('2被點擊了',ToastAndroid.SHORT);
? ? };
? ? //一般方法（有參）
? ? press3(x,y) {
this.setState({
data3: x+y
});
? ? ? ? ToastAndroid.show('3被點擊了: '+this.state.data3,ToastAndroid.SHORT);
? ? };
? ? //一般方法（有參）
? ? press4(x) {
this.setState({
data4: x
});
? ? ? ? ToastAndroid.show('4被點擊了',ToastAndroid.SHORT);
? ? };
? ? //箭頭函數(shù)（有參）
? ? press5 = (x) => {
this.setState({
data5: x
});
? ? ? ? ToastAndroid.show('5被點擊了',ToastAndroid.SHORT);
? ? };
? ? //箭頭函數(shù)（有參）
? ? press6 = (x) => {
this.setState({
data6: x
});
? ? ? ? ToastAndroid.show('6被點擊了',ToastAndroid.SHORT);
? ? };
? ? render() {
return (
? ? ? ? ? ? ? ? {/*正確的方式應(yīng)該不在render的時候立即執(zhí)行瓦盛。因此正確調(diào)用方法如下，同時外潜，箭頭函數(shù)將一個函數(shù)賦值給press0變量原环，變量在調(diào)用的時候自然不需要加（）*/}
? ? ? ? ? ? ? ? ? ? style={styles.text}
// onPress={this.press0} //如果該方法本身就是箭頭函數(shù)，那么直接調(diào)用this.press0
// onPress={()=>this.press0()}//無論該方法是箭頭函數(shù)還是普通函數(shù)处窥，都可以利用該方法來執(zhí)行()=>this.press0()
? ? ? ? ? ? ? ? ? ? onPress={this.press0.bind(this)}//無論該方法是箭頭函數(shù)還是普通函數(shù)嘱吗，都可以利用該方法來執(zhí)行()=>this.press0()
? ? ? ? ? ? ? ? >{this.state.data0}
? ? ? ? ? ? ? ? {/*普通函數(shù)的無參與有參的調(diào)用方式相同。注意的是有參的函數(shù)使用bind方式傳遞參數(shù)時this必須在最前面滔驾。*/}
? ? ? ? ? ? ? ? ? ? style={styles.text}
onPress={() =>this.press1()}
>{this.state.data1}
? ? ? ? ? ? ? ? ? ? style={styles.text}
onPress={this.press2.bind(this)}
>{this.state.data2}
? ? ? ? ? ? ? ? ? ? style={styles.text}
onPress={this.press3.bind(this, 2222,1111)}
>{this.state.data3}
? ? ? ? ? ? ? ? ? ? style={styles.text}
onPress={()=>this.press4(2222)}
>{this.state.data4}
? ? ? ? ? ? ? ? {/*下面的調(diào)用方法錯誤谒麦，原因：下面的調(diào)用方式導(dǎo)致onpress事件直接被調(diào)用press5方法修改了state，
由于state被修改哆致，頁面被重新渲染绕德，再次直接調(diào)用press5形成循環(huán)
? ? ? ? */}
{/*正確函數(shù)調(diào)用方式
1、箭頭方法 onPress={() => this.press1()} （無參摊阀、箭頭函數(shù)或普通函數(shù)耻蛇，都可以用此方式調(diào)用）
2、箭頭方法 onPress={() => this.press1(xx)} （有參胞此、箭頭函數(shù)或普通函數(shù)臣咖，都可以用此方式調(diào)用）
3、bind方式 onPress={this.press2.bind(this)}? （無參漱牵、箭頭函數(shù)或普通函數(shù)夺蛇，都可以用此方式調(diào)用）
4、bind方式 onPress={this.press2.bind(this,x)}（有參酣胀、箭頭函數(shù)或普通函數(shù)蚊惯，都可以用此方式調(diào)用）
? ? ? ? */}
? ? ? ? ? ? ? ? ? ? style={styles.text}
//錯誤
//onPress={this.press5(2222)}
//正確
? ? ? ? ? ? ? ? ? ? onPress={this.press5.bind(this,2222)}
//正確
//onPress={()=>this.press5(2222)}
? ? ? ? ? ? ? ? >{this.state.data5}
? ? ? ? ? ? ? ? ? ? style={styles.text}
//錯誤
//onPress={this.press6(2222)}
//正確
? ? ? ? ? ? ? ? ? ? onPress={this.press6.bind(this,2222)}
//正確
//onPress={()=>this.press6(2222)}
? ? ? ? ? ? ? ? >{this.state.data6}
? ? ? ? );
? ? }
}
const styles =StyleSheet.create({
text: {
backgroundColor:'red',
? ? ? ? width:200,
? ? ? ? height:30,
? ? ? ? marginBottom:50,
? ? ? ? justifyContent:'center',
? ? ? ? alignItems:'center',
? ? },
});
ES6 最簡單 易懂 箭頭函數(shù)愿卸、普通函數(shù)、調(diào)用方法
github上代碼（持續(xù)更新）：
https://github.com/KevinChenJin/React-Native.git
