Javascript 无法在嵌套屏幕内使用onPress进行导航_Javascript_Reactjs_React Native

Javascript 无法在嵌套屏幕内使用onPress进行导航

javascript reactjs react-native

Javascript 无法在嵌套屏幕内使用onPress进行导航,javascript,reactjs,react-native,Javascript,Reactjs,React Native,让我首先说，我是一个新的反应。我有一个AppNavigation.js组件，该组件包含嵌套函数，用于使用CreateBoottomTabNavigator（）交换选项卡式视图——我遇到的问题是，我无法在仪表板屏幕的一个嵌套组件中使用我创建的按钮。它说我的钩子被错误地使用了。我从堆栈溢出源中尝试了许多方法。但是，我无法在单击按钮后导航到视图在屏幕组件中使用嵌套组件时，如何导航到其他组件？错误： ReferenceError: Can't find variable: navigation Pr

让我首先说，我是一个新的反应。我有一个AppNavigation.js组件，该组件包含嵌套函数，用于使用CreateBoottomTabNavigator（）交换选项卡式视图——我遇到的问题是，我无法在仪表板屏幕的一个嵌套组件中使用我创建的按钮。它说我的钩子被错误地使用了。我从堆栈溢出源中尝试了许多方法。但是，我无法在单击按钮后导航到视图在屏幕组件中使用嵌套组件时，如何导航到其他组件？

错误：

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;

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>
    );
  }

import React，{Component}来自'React'；
从“react native”导入{视图、文本、样式表、TouchableOpacity、维度、图像、异步存储}；
从“反应本机向量图标/MaterialCommunityIcons”导入MaterialCommunityIcons
从“axios”导入axios
类ProfileCard扩展组件{
建造师（道具）{
超级（道具）；
这个.调查形式={}；
此.state={
hasSurveyProfile:错误
};
}
componentDidMount（）{
这个。getToken（）
.然后（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}}}}）
。然后（响应=>{
this.setState（{survey_form:JSON.stringify（response.data）}）；
this.setState（{hasSurveyProfile:true}）；
})
.catch（错误=>{
if（error.response.status==404）{
this.setState（{hasSurveyProfile:false}）
}
});
}
异步getToken（用户）{
试一试{
/////
}捕获（错误）{
log（“出错了”，错误）；
}
}
render（）{
const{navigation}=this.props；
报税表（
调查概况
完成你的调查！
{
（this.state.hasSurveyProfile==false）
？导航。导航（'StartSurvey'）}>
开始调查
: 
编辑调查
}
)
}
}
导出默认档案卡；

AppNavigation.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;

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>
    );
  }

从“React”导入React
从“react native”导入{文本、TouchableOpacity、图像、视图}
从'@react-navigation/native'导入{NavigationContainer}；
从“@react navigation/bottom tabs”导入{createBottomTabNavigator}
从“反应本机向量图标/MaterialCommunityIcons”导入MaterialCommunityIcons
从“../containers/UserProfileCard”导入ProfileCard；
功能仪表板屏幕（）{
返回(
);
}
函数MessagesScreen（）{
返回(
信息！
);
}
const Tab=createBottomTabNavigator（）；
函数MyTabs（）{
返回(
(
),
}}
/>
(
),
}}
/>
);
}
导出默认函数AppNavigation（）{
返回(
);
}

StartSurvey.js（无法通过按钮点击进入此处）

import React，{Component}来自'React'；
从“react native”导入{视图、文本、样式表、TouchableOpacity、维度、图像、异步存储}；
从“反应本机向量图标/MaterialCommunityIcons”导入MaterialCommunityIcons
从“axios”导入axios；
从“设计axios”导入{initMiddleware}
初始化中间件（{storage:AsyncStorage}）
类StartSurvey扩展组件{
建造师（道具）{
超级（道具）；
此.state={
用户id:“”
}
}
componentDidMount（）{
这个。getToken（）
.然后（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}}}}）
。然后（响应=>{
this.setState（{user:JSON.stringify（response.data）}）；
this.setState（{user_id:JSON.parse（this.state.user）.id.toString（）}）
})
.catch（错误=>{
控制台错误（error）；
});
}
异步getToken（用户）{
试一试{
让userData=wait AsyncStorage.getItem（“userData”）；
让data=JSON.parse（userData）；
让user=JSON.parse（数据）
让userObj={user\u id:JSON.stringify（user.data.data.id），email:JSON.stringify（user.data.data.email），authentication\u token:JSON.stringify（user.data.data.authentication\u token）}
返回userObj
}捕获（错误）{
log（“出错了”，错误）；
}
}
render（）{
返回(
你好，调查！
)
}
}
导出默认StartSurvey；

因此看起来您并不是在将导航道具传递到

组件中

您可以将

导航

功能传递给

组件

然后在

组件内部，您可以将相同的

导航

功能传递给

组件

因此，代码最终看起来像：

<DashboardScreen navigation={navigation} />

后来

<ProfileCard navigation={navigation} />

编辑：

你可能需要改变