TouchableOpacity onPress 在本机反应中不起作用答案

【问题标题】：TouchableOpacity onPress not working in react nativeTouchableOpacity onPress 在本机反应中不起作用
【发布时间】：2018-06-22 15:35:52
【问题描述】：

当我点击 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;

【问题讨论】：

尝试使用-导出默认ScheduledApp
我在我的主页中导入HomeScreen..那么我可以使用export default ScheduledApp吗？？
Yes.. 它将引用您在该函数中定义的路由名称。请在此处查看 - reactnavigation.org/docs/intro/quick-start
我的问题是我有一个TabNavigator，当我点击侧边栏时，我想导航到HomeScreen，然后点击卡片，想去CourseDetail 页面。那么如何在选项卡导航器中使用堆栈导航器？

标签： javascript react-native navigation stack-navigator touchableopacity

【解决方案1】：

我使用 withNavigation 并解决了我的问题：

import { withNavigation } from 'react-navigation';
...
const MyHome = () => {
return (
    <TouchableOpacity onPress = {() => {props.navigation.navigate('SecondPage')}}
       <Text>go to other<Text>
    </TouchableOpacity>
);

};
export default withNavigation(MyHome)

【讨论】：

【解决方案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;

【讨论】：

试过了，但是点击卡cannot read property navigate of undefined..怎么办？
你能分享App.js代码吗？我认为您需要导出ScheduledApp 并添加到App.js
[![主屏幕代码][1]][1] [1]: i.stack.imgur.com/pS4yh.png .是否需要为ScheduledApp创建一个新页面并将其导入App.js？
我可以这样做吗[1]：i.stack.imgur.com/xUhYb.png。因为MyHome 用于返回TabNavigator 而MyScreen 用于返回StackNavigator。

【解决方案3】：

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

【讨论】：