无法在嵌套的 Screen React Native 内使用 onPress 进行导航

Question

Let me begin by saying that I am fairly new to React Native. I have an AppNavigation.js component that holds nested functions for swapping tabbed views using createBottomTabNavigator() -- The issue I am having, is I cannot use a button that I created inside of one of the nested components for the Dashboard Screen. Its stating that my hook is being incorrectly used. I tried numerous approaches from stack overflow sources. Yet, I cannot get the button to navigate to the view after clicking it. How do I navigate to other components while using a nested component for the Screen component?

ERROR:

ReferenceError: Can't find variable: navigation

ProfileCard.js

import React, {Component} from 'react';
import { View, Text, StyleSheet, TouchableOpacity, Dimensions, Image, AsyncStorage} from 'react-native';
import MaterialCommunityIcons from 'react-native-vector-icons/MaterialCommunityIcons'
import axios from 'axios'

class ProfileCard extends Component {

    constructor(props) {
        super(props);
        this.survey_form = {};
        this.state = {
          hasSurveyProfile: false
        };
        
    }
   

    componentDidMount() {
  
        this.getToken()
        .then(obj => axios.get(`http://127.0.0.1:3000/api/v1/check_for_survey_form/${obj.user_id}`, {headers: {Accept: 'application/json', 'X-User-Email': `${obj.email}`, 'X-User-Token': `${obj.authentication_token}`}}))
        .then(response => {
          
          this.setState({survey_form: JSON.stringify(response.data)});
          this.setState({hasSurveyProfile: true});
        })
        .catch(error => {
          if (error.response.status == 404) {
              this.setState({hasSurveyProfile: false})
          }
        });
    }
  
    async getToken(user) {
      try {
         /////
      } catch (error) {
        console.log("Something went wrong", error);
      }
    }

    render() {
        const { navigation } = this.props;
        return(     
        <View style={{paddingVertical: 5, paddingHorizontal: 5}}>
         <View style={{backgroundColor: '#fff', width: Dimensions.get('window').width * .9, minHeight: 50, padding: 2, borderColor: 'gray', borderRadius: 4, borderWidth: 1}}>
                <View style={{flexDirection: "row"}}>
                    <View style={{flex: 1}}>
                        <Text style={{textAlign: 'center', fontWeight: '500', fontSize: 16}}>Survey Profile</Text>
                        <Text style={{textAlign: 'center', fontSize: 10}}>Complete your Survey!</Text>
                        {
                            (this.state.hasSurveyProfile == false)
                                ? <TouchableOpacity style={styles.buttoncontainer} onPress={() => navigation.navigate('StartSurvey')}> 
                                  <Text style={styles.buttontext}>Start Survey</Text> 
                                 </TouchableOpacity>     
                                     
                                : <TouchableOpacity style={styles.buttoncontainer}>
                                   <Text style={styles.buttontext}>Edit Survey</Text>
                                  </TouchableOpacity>  
                        }
                    
                    </View>
                </View> 
          </View>
        </View>    
        )
    }
}

export default ProfileCard;

AppNavigation.js

import React from 'react'
import { Text, TouchableOpacity, Image, View } from 'react-native'
import {NavigationContainer} from '@react-navigation/native';
import {createBottomTabNavigator} from '@react-navigation/bottom-tabs'
import MaterialCommunityIcons from 'react-native-vector-icons/MaterialCommunityIcons'
import ProfileCard from '../containers/UserProfileCard';

function DashboardScreen() {
    return (
      <View style={{ flex: 1, justifyContent: 'center', alignItems: 'center' }}>
          <View style={{flex: 1, alignItems: 'center'}}>
              <ProfileCard />   
          </View>
      </View>
    );
  }

  function MessagesScreen() {
    return (
      <View style={{ flex: 1, justifyContent: 'center', alignItems: 'center' }}>
        <Text>Messages!</Text>
      </View>
    );
  }
  const Tab = createBottomTabNavigator();
  
  function MyTabs() {
    return (
      <Tab.Navigator>
         <Tab.Screen
        name="Dashboard"
        component={DashboardScreen}
        options={{
          tabBarLabel: 'Dashboard',
          tabBarIcon: ({ color }) => (
            <MaterialCommunityIcons name="home" color={color} size={26} />
          ),
        }}
      />
    
<Tab.Screen 
        name="Messages" 
        component={MessagesScreen} 
        options={{
            tabBarLabel: 'Messages',
            tabBarIcon: ({ color }) => (
              <MaterialCommunityIcons name="email-outline" color={color} size={26} />
            ),
          }}
        />
      </Tab.Navigator>
    );
  }
  
  export default function AppNavigation() {
    return (
      <NavigationContainer>
        <MyTabs />
      </NavigationContainer>
    );
  }
  

StartSurvey.js (Unable to get here from button click)

import React, {Component} from 'react';
import { View, Text, StyleSheet, TouchableOpacity, Dimensions, Image, AsyncStorage} from 'react-native';
import MaterialCommunityIcons from 'react-native-vector-icons/MaterialCommunityIcons'
import axios from 'axios';
import { initMiddleware } from 'devise-axios'
initMiddleware({storage: AsyncStorage})

class StartSurvey extends Component {
    constructor(props) {
        super(props);
        this.state = {
         user_id: ''
        }
    }

    componentDidMount() {
  
        this.getToken()
        .then(obj => axios.get(`http://127.0.0.1:3000/api/v1/retrieve_user/${obj.user_id}`, {headers: {Accept: 'application/json', 'X-User-Email': `${obj.email}`, 'X-User-Token': `${obj.authentication_token}`}}))
        .then(response => {
          
          this.setState({ user: JSON.stringify(response.data)});
          
          this.setState({user_id: JSON.parse(this.state.user).id.toString()})
    
        })
        .catch(error => {
          console.error(error);
        });
    }
  
    async getToken(user) {
      try {
        let userData = await AsyncStorage.getItem("userData");
        let data = JSON.parse(userData);
        let user = JSON.parse(data)
    
        let userObj = {user_id: JSON.stringify(user.data.data.id), email: JSON.stringify(user.data.data.email), authentication_token: JSON.stringify(user.data.data.authentication_token)}
        
        return userObj
      } catch (error) {
        console.log("Something went wrong", error);
      }
    }
  
    render() {
        return(
        <View style={{paddingVertical: 5, paddingHorizontal: 5}}>
         <View style={{backgroundColor: '#fff', width: Dimensions.get('window').width * .9, minHeight: 50, padding: 2, borderColor: 'gray', borderRadius: 4, borderWidth: 1}}>
            <Text>Hello Survey!</Text>
          </View>
        </View>    
        )
    }
}

export default StartSurvey;

Answer 1

So it doesn't look like you're actually passing the navigation prop into the <ProfileCard /> component.

You can pass the navigation function to the <DashboardScreen /> component.

Then inside of the <DashboardScreen /> component, you can pass the same navigation function to the <ProfileCard /> component.

So the code ends up looking something like:

<DashboardScreen navigation={navigation} />

Later on...

<ProfileCard navigation={navigation} />

EDIT:

You'll likely need to change the way you're passing the <DashboardScreen /> component to the <Tab.Screen > component, making it a child of <Tab.Screen>

Something that looks like:

<Tab.Screen>
  // Your other props here...
  <DashboardScreen navigation={navigation} />
</Tab.Screen>