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

React native, routing without a nav menu item

我的应用程序上有一个抽屉和底部选项卡导航系统,效果很好,但我已经到了这样的地步,我有一些模块,我想点击按钮将用户带到一个页面进行数据输入,但是我不想在任何导航栏上显示该页面,我只需要在按下按钮时转到它。

所以在 App.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。我该怎么做?

一个简单的方法是在您的 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
  • 将您的堆栈实现重新排序为 隔离这个新屏幕