Question

我的应用程序上有一个抽屉式和底部导航栏系统，可以很好地运行，但是到了某个模块，我希望通过单击按钮将用户带到页面上进行数据输入，但是我不知道不需要任何导航栏上的该页面，只需按一下按钮即可转到该页面。

因此在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而不在导航栏中注册它。我该怎么办？

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
将堆栈实现重新排序为隔离这个新屏幕

反应本机，无需导航菜单项即可路由

1 个答案: