单击TouchableOpacity时,如何导航到其他屏幕(CourseDetail.js
)。我正在使用StackNavigator
。但是收到错误undefined is not an object evaluating this.props.navigation
。我在下面粘贴我的代码。请帮忙。我知道有一个简单的错误,但无法弄清楚。
HomeScreen.js
import CourseDetail from './CourseDetail';
import { StackNavigator } from 'react-navigation';
const HomeScreen = ({course, navigation}) =>{
const {name,featured_image,id} = course;
const {navigate} = this.props.navigation;
return(
<TouchableOpacity onPress={() => navigate('CourseDetail', {id})}>
<Card>
<CardSection>
<View style={styles.thumbnailContainerStyle}>
{course.term_id == '28' ? (<View></View>) : (
<Text style={styles.userStyle}>{name}
</Text> )}
</View>
</CardSection>
</Card>
</TouchableOpacity>
);
};
const ScheduledApp = StackNavigator({
Home:{
screen: HomeScreen
},
CourseDetail:{
screen: CourseDetail
}
});
export default HomeScreen;
答案 0 :(得分:0)
HomeScreen是一个功能组件,因此它没有“this”关键字绑定到它
答案 1 :(得分:0)
您使用
无状态功能组件
道具在参数
中可用import CourseDetail from './CourseDetail';
import { StackNavigator } from 'react-navigation';
const HomeScreen = ({course, navigation}) =>{
const {name,featured_image,id} = course;
const {navigate} = navigation; //No need of this.props
return(
<TouchableOpacity onPress={() => navigate('CourseDetail', {id})}>
<Card>
<CardSection>
<View style={styles.thumbnailContainerStyle}>
{course.term_id == '28' ? (<View></View>) : (
<Text style={styles.userStyle}>{name}
</Text> )}
</View>
</CardSection>
</Card>
</TouchableOpacity>
);
};
const ScheduledApp = StackNavigator({
Home:{
screen: HomeScreen
},
CourseDetail:{
screen: CourseDetail
}
});
export default HomeScreen;
答案 2 :(得分:0)
我使用了Navigation并解决了我的问题:
import { withNavigation } from 'react-navigation';
...
const MyHome = () => {
return (
<TouchableOpacity onPress = {() => {props.navigation.navigate('SecondPage')}}
<Text>go to other<Text>
</TouchableOpacity>
);
};
export default withNavigation(MyHome)