React Native中未将TrackScreen加入底部导航如何从HomeScreen访问该页面

错误点梳理 #

• 路由未注册：react-navigation仅支持跳转到已在路由表中声明的页面，你没有将TrackScreen加入路由配置，所以跳转失效
• 跳转调用错误：HomeScreen是函数组件，不存在this上下文，你已经通过参数拿到了navigation对象，直接调用即可，不需要写this.navigator
• 导航结构不符合需求：如果不想让TrackScreen出现在底部Tab栏，需要使用Stack嵌套BottomTab的导航结构，将底部Tab整体作为Stack的一个页面，TrackScreen单独注册为Stack的独立页面，就不会出现在底部Tab栏中

你的应用界面示例：

修正代码 #

1. 调整导航配置（App.js补充完整导航逻辑） #

import React, { Component } from 'react';
import { StyleSheet, Text, View,  TextInput, TouchableOpacity, Image, ImageBackground, Alert} from 'react-native';
import { Button } from 'react-native-elements';
import { Icon, Input } from 'react-native-elements'
import { NavigationContainer } from '@react-navigation/native';
import { createBottomTabNavigator } from '@react-navigation/bottom-tabs';
import { createNativeStackNavigator } from '@react-navigation/native-stack';
import Track from './src/component/Track';
const styles = require('./assets/css/style'); 

function TrackScreen({ navigation }){ 
  return ( 
    <View style={{ flex: 1, justifyContent: 'center', alignItems: 'center' }}>
      <Text>Page Track</Text>    
    </View>
  );
}

function HomeScreen({navigation}) {
  return ( 
    <View style={styles.container}>
      <ImageBackground source={require('./assets/images/bg/489.jpg')} resizeMode="cover" style={{flex:1,justifyContent:'center'}}>
        {/* 修正跳转逻辑 */}
        <TouchableOpacity onPress={()=> navigation.navigate('Track')} style={{position:'absolute',top:20,left:20}}>
          <View style={{padding:10,backgroundColor:'#0da3aa',borderRadius:20}}>
            <Image style={{resizeMode:'contain',width:50,height:50}} source={require('./assets/images/trackicon.png')} />          
          </View>
          <Text style={{textAlign:'center',fontWeight:'bold',fontSize:18}}>Track</Text>
        </TouchableOpacity>
      </ImageBackground>
    </View> 
  );
}

// 底部Tab导航配置，仅放入需要展示在底部栏的页面
const Tab = createBottomTabNavigator();
function BottomTabNavigator() {
  return (
    <Tab.Navigator>
      <Tab.Screen name="Home" component={HomeScreen} />
      {/* 其他需要在底部Tab展示的页面在此处添加，不要加TrackScreen */}
    </Tab.Navigator>
  )
}

// 根Stack导航配置
const Stack = createNativeStackNavigator();
export default function App() {
  return (
    <NavigationContainer>
      <Stack.Navigator screenOptions={{headerShown: false}}>
        {/* 底部Tab作为根Stack的第一个页面 */}
        <Stack.Screen name="Main" component={BottomTabNavigator} />
        {/* TrackScreen单独注册到根Stack，不会出现在底部Tab */}
        <Stack.Screen name="Track" component={TrackScreen} />
      </Stack.Navigator>
    </NavigationContainer>
  )
}

注意事项 #

• 跳转时传入的路由名'Track'必须和Stack.Screen的name属性完全一致，大小写敏感
• 如果不需要Stack的默认导航头，可以通过options={{headerShown: false}}单独关闭对应页面的头部

内容的提问来源于stack exchange，提问作者Mochammad Danny setyawan