四、RN中onPress调用函数的两种写法踩坑

发表于 | 分类于

有如下代码：

1
2
3
<TouchableOpacity style={styles.loginContainer} onPress={this.login}>
	<Text style={{color:'white', fontSize:18}}>去登录</Text>
</TouchableOpacity>

login方法如下：

1
2
3
login = () => {
	this.props.myNavigation.navigate('Login',{action: 'company_login'});
}

这样写完全没有问题。但是如果点击按钮调用login方法，我想传入参数呢？

1
2
3
4
5
6
<TouchableOpacity style={styles.loginContainer} onPress={this.login(userName)}>
	<Text style={{color:'white', fontSize:18}}>去登录</Text>
</TouchableOpacity>
login = (userName) => {
	this.props.myNavigation.navigate('Login',{action: 'company_login'});
}

上面写法是错误的。会发现一加载该页面就会自动触发按钮点击事件导致login方法被调用。但是手动点击按钮login方法又不执行。
对于传参数的函数调用写法记录如下：

1
2
3
<TouchableOpacity style={styles.loginContainer} onPress={()=>this.login(userName)}>
	<Text style={{color:'white', fontSize:18}}>去登录</Text>
</TouchableOpacity>

这样写就没问题了。