这在Login.js组件中工作正常:
average distance
between cars
time
0 1.55
1 10.05
2 53.04
但是,当我将其移动到单独的组件时,我收到该帖子标题中的错误。 SocialFooter.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');
}
};
我尝试在onPress方法中添加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;
,例如:this
没有任何效果,请帮助我。谢谢!
答案 0 :(得分:0)
通过添加以下内容解决:
父组件的const { navigation } = this.props;
方法(Login.js)中的render()
然后我将其传递给子组件,如下所示:
<SocialFooter navigation={navigation}/>
答案 1 :(得分:0)
导航道具仅提供给您已配置的react-navigation
屏幕,如果您需要在其他任何组件中使用导航道具,则需要将其作为道具传递
<SocialFooter navigation={navigation}/>