这在 Login.js 组件中运行良好:
<View style={{flexDirection: 'row', justifyContent:"center"}}>
<TouchableHighlight onPress={() => this.onPressSocialButton('tel')} >
<Image source={require('./img/icono-tel.png')} style={{width:70, height:70,margin:10}} />
</TouchableHighlight>
<TouchableHighlight onPress={() => this.onPressSocialButton('wa')}>
<Image source={require('./img/icono-whatsapp.png')} style={{width:70, height:70,margin:10}} />
</TouchableHighlight>
<TouchableHighlight onPress={() => this.onPressSocialButton('fb')}>
<Image source={require('./img/icono-like.png')} style={{width:70, height:70,margin:10}} />
</TouchableHighlight>
<TouchableHighlight onPress={() => this.onPressSocialButton('ingrm')}>
<Image source={require('./img/icono-like-instagram.png')} style={{width:70, height:70,margin:10}} />
</TouchableHighlight>
</View>
onPressSocialButton = (media) => {
if (media === 'tel') {
this.props.navigation.navigate('TelUtiles');
} else if (media === 'wa') {
Linking.openURL('whatsapp://send?text==%C2%A1Hola!%20Quiero%20realizar%20una%20consulta.&phone=5493416931539').catch(err => console.error('An error occurred', err));
} else if (media === 'fb') {
Linking.openURL('https://www.facebook.com/n/?mascotaweb');
} else if (media === 'ingrm') {
Linking.openURL('http://instagram.com/_u/mascotaweb');
}
};
但是当我将它移动到一个单独的组件时,我收到了这篇文章标题中的错误。SocialFooter.js:
import React, { Component } from 'react';
import {
View,
Image,
TouchableHighlight,
Linking
} from 'react-native';
export default class SocialFooter extends Component {
static navigationOptions = { header: null }
constructor(props) {
super(props);
}
onPressSocialButton = (media) => {
if (media === 'tel') {
this.props.navigation.navigate('TelUtiles');
} else if (media === 'wa') {
Linking.openURL('whatsapp://send?text==%C2%A1Hola!%20Quiero%20realizar%20una%20consulta.&phone=5493416931539').catch(err => console.error('An error occurred', err));
} else if (media === 'fb') {
Linking.openURL('https://www.facebook.com/n/?mascotaweb');
} else if (media === 'ingrm') {
Linking.openURL('http://instagram.com/_u/mascotaweb');
}
};
render() {
return (
<View style={{flexDirection: 'row', justifyContent:"center"}}>
<TouchableHighlight onPress={() => this.onPressSocialButton('tel')} >
<Image source={require('./img/icono-tel.png')} style={{width:70, height:70,margin:10}} />
</TouchableHighlight>
<TouchableHighlight onPress={() => this.onPressSocialButton('wa')}>
<Image source={require('./img/icono-whatsapp.png')} style={{width:70, height:70,margin:10}} />
</TouchableHighlight>
<TouchableHighlight onPress={() => this.onPressSocialButton('fb')}>
<Image source={require('./img/icono-like.png')} style={{width:70, height:70,margin:10}} />
</TouchableHighlight>
<TouchableHighlight onPress={() => this.onPressSocialButton('ingrm')}>
<Image source={require('./img/icono-like-instagram.png')} style={{width:70, height:70,margin:10}} />
</TouchableHighlight>
</View>
)
}
}
我尝试const { navigation:navigate } = this.props;
在 onPress 方法中添加,也尝试this
在构造函数中进行绑定,例如:this.onPressSocialButton = this.onPressSocialButton.bind(this);
没有任何效果,请帮助我。谢谢!