反应本机，没有导航菜单项的路由

Question

我的应用程序上有一个抽屉和底部选项卡导航系统，可以完美运行，但我已经到了这样的地步，我有模块，我希望单击按钮将用户带到一个页面进行数据输入，但我不希望该页面在任何导航栏上，我只需要在按下按钮时路由到它。

所以在应用程序中.js我有我现有的导航系统：

import React, { Component } from 'react';
import { AppRegistry, StyleSheet, Text, View, Image } from 'react-native';
import Splash from './Splash';
import Login from './src/components/Login/Login';
import Dashboard from './src/components/Dashboard/Dashboard';
import Trends from './src/components/Trends/Trends';
import EnterWeight from './src/components/Dashboard/EnterWeight';
import Profile from './src/Profile';
import {createAppContainer, createSwitchNavigator} from 'react-navigation';
import {createStackNavigator} from 'react-navigation-stack';
import { createMaterialBottomTabNavigator } from 'react-navigation-material-bottom-tabs';
import { createDrawerNavigator } from 'react-navigation-drawer';
import Icon from '@expo/vector-icons/Ionicons';
import * as SQLite from 'expo-sqlite';
const db = SQLite.openDatabase('testDatabase');
const DashboardTabNavigator = createMaterialBottomTabNavigator({
Dashboard: {screen:Dashboard},
Trends: {screen:Trends},
//Profile: {screen:Profile},
EnterWeight: {screen:EnterWeight}
},
{
barStyle: { backgroundColor: '#000'},
},
{
navigationOptions:({navigation})=>{
const {routeName} = navigation.state.routes[navigation.state.index]
return{
headerTitle:routeName
}
}
}
);
const DashboardStackNavigator = createStackNavigator({
DashboardTabNavigator: DashboardTabNavigator
},
{
defaultNavigationOptions:({navigation}) => {
return {
headerLeft: (<Icon style={{paddingLeft:10}} onPress={()=>navigation.openDrawer()} name="md-menu" size={30} />),
headerRight: (<Image style={styles.crossLogo} source={require('./src/images/LOGO-cross_only.png')}/>)
}
}
});
const AppDrawerNavigator = createDrawerNavigator({
Dashboard:{screen:DashboardStackNavigator},
Logout:{screen:Login}
});
const AppSwitchNavigator = createSwitchNavigator({
Login:{screen: Login},
Dashboard:{screen:AppDrawerNavigator},
},
{
initialRouteName: 'Login',
});

export default class MMH_App_Final extends Component{
render() {
const App = createAppContainer(AppSwitchNavigator);
return(
<App />
);
}
}
const styles = StyleSheet.create({
container: {
flex: 1,
backgroundColor: '#fff',
alignItems: 'center',
justifyContent: 'center',
},
crossLogo: {
width:30,
height:30,
marginRight:10
}
});

但是在另一页上，我有

<TouchableOpacity 
style={styles.recordButton} 
onPress={() => navigate('EnterWeight')}
>

我希望能够导航到 EnterWeight，而无需在导航栏中注册它。我该怎么做？

Answer 1

一个简单的方法是管理TabNavigator上的订单：

const DashboardTabNavigator = createMaterialBottomTabNavigator({
Dashboard: {screen:Dashboard},
Trends: {screen:Trends},
//Profile: {screen:Profile},
EnterWeight: {screen:EnterWeight}
},
{
barStyle: { backgroundColor: '#000'},
},
{
navigationOptions:({navigation})=>{
const {routeName} = navigation.state.routes[navigation.state.index]
return {
headerTitle: routeName,
order: [
'Dashboard',
'Trends', 
//'Profile',
],
}
}
}
);

但是您还有其他选择，例如：

• 创建自定义TabNavigator
• 将堆栈实现重新排序为 隔离此新屏幕