问题卡在HomeStack React Navigator V5中的 "下一个页面 "按钮上

Question

我只是使用 react navigator V5，并在 HomeStack 中使用标签导航器来导航其他页面，因为我已经在 authstack 上创建了 firebase 登录。

问题是，当我在HomeScreen上制作下一页的按钮时，比如EvaluateScreen，我尝试在homestack上添加stack.navigation，结果出错。我看了一个文档，它只显示在app.js上，而不是像我的方法那样单独显示。

这里是登录后的Homestack.js。

import React from 'react';
import HomeScreen from '../screens/HomeScreen';
import ReportScreen from '../screens/ReportScreen';
import QRScreen from '../screens/QRScreen';
import ProfileScreen from '../screens/ProfileScreen';
import SettingScreen from '../screens/SettingScreen';
import EvaluateScreen from '../screens/EvaluateScreen';
import { createMaterialBottomTabNavigator } from '@react-navigation/material-bottom-tabs';
import Icon from 'react-native-vector-icons/Ionicons';

const Tab = createMaterialBottomTabNavigator();

export default function HomeStack() {
  return (
    <Tab.Navigator>
      <Tab.Screen name="Home" component={HomeScreen} 
      options={{
        tabBarLabel: 'Home',
        tabBarColor: '#51DCA8',
        tabBarIcon: ({ color }) => (
          <Icon name="ios-home" color={color} size={26} />
        ),
      }}
      />
      <Tab.Screen name="Report" component={ReportScreen} 
      options={{
        tabBarLabel: 'Report',
        tabBarColor: '#51DCA8',
        tabBarIcon: ({ color }) => (
          <Icon name="md-analytics" color={color} size={26} />
        ),
      }} 
      />
      <Tab.Screen name="QRScan" component={QRScreen} 
       options={{
        tabBarLabel: 'QRScan',
        tabBarColor: '#51DCA8',
        tabBarIcon: ({ color }) => (
          <Icon name="ios-qr-scanner" color={color} size={26} />
        ),
      }}
      />
      <Tab.Screen name="Profile" component={ProfileScreen}
      options={{
        tabBarLabel: 'Profile',
        tabBarColor: '#51DCA8',
        tabBarIcon: ({ color }) => (
          <Icon name="ios-person" color={color} size={26} />
        ),
      }} 
      />
      <Tab.Screen name="Setting" component={SettingScreen} 
      options={{
        tabBarLabel: 'Setting',
        tabBarColor: '#51DCA8',
        tabBarIcon: ({ color }) => (
          <Icon name="ios-settings" color={color} size={26} />
        ),
      }} 
      />
    </Tab.Navigator>
  );
}

主屏幕.js

import React, { useContext } from 'react';
import { Button,View, Text, StyleSheet } from 'react-native';
import { AuthContext } from '../navigation/AuthProvider';
import { NavigationContainer } from '@react-navigation/native';
import { createStackNavigator } from '@react-navigation/stack';
import EvaluateScreen from '../screens/EvaluateScreen';

export default function HomeScreen() {
  return (
    <View style={{ flex: 1, alignItems: 'center', justifyContent: 'center' }}>
      <Text>Home Screen</Text>
      <Button
        title="Go to Details"
        onPress={() => navigation.navigate('EvaluateScreen')}
      />
    </View>
    );
}


const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
    backgroundColor: '#f5f5f1'
  },
  text: {
    fontSize: 20,
    color: '#333333'
  }
});

进入按钮后的错误是ReferenceError:找不到变量:Navigation。

Answer 1

在我卡住并重新阅读了一份文档后，我必须制作一个First Homescreen Navigation功能，并像这样导入conponent。

import React from 'react';
import HomeScreen from '../screens/HomeScreen';
import ReportScreen from '../screens/ReportScreen';
import QRScreen from '../screens/QRScreen';
import ProfileScreen from '../screens/ProfileScreen';
import SettingScreen from '../screens/SettingScreen';
import EvaluateScreen from '../screens/EvaluateScreen';
import GuideScreen from '../screens/GuideScreen';
import QuizScreen  from'../screens/QuizScreen';
import { createMaterialBottomTabNavigator } from '@react-navigation/material-bottom-tabs';
import Icon from 'react-native-vector-icons/Ionicons';
import { createStackNavigator } from '@react-navigation/stack';

const HomeStack2 = createStackNavigator();

function HomeStackScreen() {
  return (
    <HomeStack2.Navigator>
      <HomeStack2.Screen name="Home" component={HomeScreen} />
      <HomeStack2.Screen name="Evaluate" component={EvaluateScreen} />
      <HomeStack2.Screen name="Guide" component={GuideScreen} />
      <HomeStack2.Screen name="Quiz" component={QuizScreen} />
    </HomeStack2.Navigator>
  );
}

之后在homestack中改成Tab.Navigator，从HomeScreen改成HomeStackScreen来跨越另一个页面。

export default function HomeStack() {
  return (

    <Tab.Navigator>
      <Tab.Screen name="Home" component={HomeStackScreen} 
      options={{
        tabBarLabel: 'Home',
        tabBarColor: '#51DCA8',
        tabBarIcon: ({ color }) => (
          <Icon name="ios-home" color={color} size={26} />
        ),
      }}
      />

在主屏幕中，我可以添加按钮，并跨越到另一个页面。在导出的默认功能中不要伪造插入{导航}，你可以使用按钮或TouchableOpacity来使按钮进入下一页。

import React from 'react';
import { View,Button,Text, StyleSheet, TouchableOpacity} from 'react-native';

export default function HomeScreen({ navigation }) {

  return (

    <View style={{ flex: 1, justifyContent: 'center', alignItems: 'center' }}>
        <Text style={{ marginTop: 50, fontSize: 30 }}>Evaluate Test</Text>
        <View
          style={{ flex: 1, justifyContent: 'center', alignItems: 'center' }}>
          <TouchableOpacity
            style={styles.button}
            onPress={() => navigation.navigate('Evaluate')}>
            <Text style={{fontSize: 20 }}>Evalute Test</Text>
          </TouchableOpacity>
          <TouchableOpacity
            style={styles.button}
            onPress={() => navigation.navigate('Guide')}>
            <Text style={{fontSize: 20 }}>Guide</Text>
          </TouchableOpacity>
        </View>
      </View>
  );
  }
  const styles = StyleSheet.create({
    button: {
      alignItems: 'center',
      backgroundColor: '#DDDDDD',
      padding: 20,
      width: 350,
      marginTop: 10,
    },
    container: {
      flex: 1,
      justifyContent: 'center',
      alignItems: 'center',
      backgroundColor: '#51DCA8',

    },
    text: {
      fontSize: 35,
      color: '#333333'
    }
  });

参考文献https:/reactnavigation.orgdocstab-based-navigation。主题 每个标签的堆栈导航器