Question

单击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;

Answer 1

HomeScreen是一个功能组件，因此它没有“this”关键字绑定到它

Answer 2

您使用

无状态功能组件

道具在参数

中可用

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;

Answer 3

我使用了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)

TouchableOpacity onPress无法正常反应

3 个答案: