Question

我只使用react导航器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>
  );
}

HomeScreen.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：找不到变量：导航

Answer 1

我卡住并再次阅读文档后。我必须具有“第一个主屏幕导航”功能并像这样导入组件。

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} />
        ),
      }}
      />

在主屏幕中，我可以添加按钮并跨到另一页。不要伪造在导出默认功能中插入{导航}。您可以使用button或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.org/docs/tab-based-navigation/ 主题每个选项卡的堆栈导航器

问题停留在HomeStack React Navigator V5的下一页按钮上

1 个答案: