Question

我目前正在使用React Native开发一个项目，并且在创建导航时遇到了问题，我不允许将导航插入BottomTabNavigator。我有一个模块，当我按“设置”时，将在其中进入“配置文件屏幕”。

问题：如何导航未包含在BottomTabNavigator中的屏幕？

导入文件：

import React, {Component} from 'react';
import {Platform, StyleSheet, View, YellowBox, Dimensions, AppRegistry, Image, TouchableOpacity, AsyncStorage,} from 'react-native';
import axios from 'axios';
import {Container, Header, Title, Content, Footer, FooterTab, Button, Left, Right, Body, Icon, Text, Item, Input,Toast} from 'native-base';
import {
  createSwitchNavigator,
  createAppContainer,
  createStackNavigator,
  createDrawerNavigator,
  createBottomTabNavigator
} 
  from 'react-navigation';

 import Fa5Icons from 'react-native-vector-icons/FontAwesome5';
 import Mat5Icons from 'react-native-vector-icons/MaterialCommunityIcons';
 import MaterialIcons from 'react-native-vector-icons/MaterialIcons';

import AuthLoadingScreen from './Screens/AuthLoadingScreen';
import SignInScreen from './Screens/SignInScreen';
import DriverSettingScreen from './Screens/DriverSettingScreen';
import DriverHistoryScreen from './Screens/DriverHistoryScreen';
import DriverDashScreen from './Screens/DriverDashScreen';
import DriverNotificationScreen from './Screens/DriverNotificationScreen';
import DriverAssignOrderScreen from './Screens/DriverAssignOrderScreen';
import DriverProfileScreen from './Screens/DriverProfileScreen';

导航：

    const AuthStackNavigator = createStackNavigator({ 
  SignIn: SignInScreen,
});

let that = this;

const AppTabNavigator = createBottomTabNavigator({
  DriverDashScreen: {
    screen:DriverDashScreen,

    navigationOptions: ({ navigation }) => ({
      tabBarLabel:"Home",
      tabBarIcon: ({ focused, tintColor }) => {
          const { routeName } = navigation.state;
          if (routeName === 'DriverDashScreen') {
              return <Fa5Icons name='compass' size={22} color={tintColor} />
          } 
          else
          {
            return <Fa5Icons name='compass' size={22}  style={{color:'black'}}/>
          }
      },
      tabBarOptions: {
        activeTintColor: '#008E9B',
        inactiveTintColor: 'grey',
        showIcon: true,
        labelStyle: {
          fontWeight: 'bold',
        },
      },
    })
  },
  DriverAssignOrderScreen: {
    screen:DriverAssignOrderScreen,

    navigationOptions: ({ navigation }) => ({
      tabBarLabel:"Orders",
      tabBarIcon: ({ focused, tintColor }) => {
          const { routeName } = navigation.state;
          if (routeName === 'DriverAssignOrderScreen') {
              return <Mat5Icons name='food' size={27} color={tintColor} />
          } 
          else
          {
            return <Mat5Icons name='food' size={27}  style={{color:'black'}} />
          }
      },
      tabStyle: { justifyContent: 'center', alignItems: 'center', paddingVertical: 5 },
      tabBarOptions: {
        activeTintColor: '#008E9B',
        inactiveTintColor: 'grey',
        showIcon: true,
        labelStyle: {
          fontWeight: 'bold',
        },
      },
    })
  },
  DriverHistoryScreen: {
    screen:DriverHistoryScreen,
    navigationOptions: ({ navigation }) => ({
      tabBarLabel:"History",
      tabBarIcon: ({ focused, tintColor }) => {
          const { routeName } = navigation.state;
          if (routeName === 'DriverHistoryScreen') {
              return <Fa5Icons name='history' size={19} color={tintColor} />
          } 
      },
      tabBarOptions: {
        activeTintColor: '#008E9B',
        inactiveTintColor: 'grey',
        showIcon: true,
        labelStyle: {
          fontWeight: 'bold',
        },
      },
    })
  },
  DriverNotificationScreen: {
    screen:DriverNotificationScreen,
    navigationOptions: ({ navigation }) => ({
      tabBarLabel:"Notification",
      tabBarIcon: ({ focused, tintColor }) => {
          const { routeName } = navigation.state;
          if (routeName === 'DriverNotificationScreen') {
              return <MaterialIcons name='notifications-active' size={22} color={tintColor} />
          } 
      },
      tabBarOptions: {
        activeTintColor: '#008E9B',
        inactiveTintColor: 'grey',
        showIcon: true,
        labelStyle: {
          fontWeight: 'bold',
        },
      },
    })
  },
  DriverSettingScreen: {
    screen:DriverSettingScreen,
    navigationOptions: ({ navigation }) => ({
      tabBarLabel:"Account",
      tabBarIcon: ({ focused, tintColor }) => {
          const { routeName } = navigation.state;
          if (routeName === 'DriverSettingScreen') {
              return <MaterialIcons name='account-circle' size={22} color={tintColor} />
          }
          else
          {
            return <MaterialIcons name='account-circle' size={22} style={{color:'black'}} />
          } 
      },
      tabBarOptions: {
        activeTintColor: '#008E9B',
        inactiveTintColor: 'grey',
        showIcon: true,
        labelStyle: {
          fontWeight: 'bold',
        },
      },
    })

  },
})
const AppStackNavigator = createStackNavigator({ 
    AppTabNavigator: {
      screen:AppTabNavigator
    }
},{
  header: null,
  headerMode: 'none'
});
const AppDrawerNavigator = createDrawerNavigator({
  Home:AppStackNavigator,
})

export default createAppContainer(createSwitchNavigator({
  AuthLoading: AuthLoadingScreen,
  Auth:AuthStackNavigator,
  App: AppDrawerNavigator,
},
{
  initialRouteName: 'AuthLoading',

}
))

我的操作按钮：

<ListItem icon onPress={() => navigate('DriverProfileScreen')}>
        <Left>
        <Button style={{ backgroundColor: "#FF9501", width:25, height:25}}>
            <Icon type="MaterialIcons" name="settings"  style={{fontSize:16}}/>
        </Button>
        </Left>
        <Body>
        <Text style={{fontSize:14}}>Settings</Text>
        </Body>
        <Right>
            <Icon name="arrow-forward" />
        </Right>
</ListItem>

Answer 1

导入文件：

    Form hi = new Form("Hi World", BoxLayout.y());
    hi.add(new Label("Hi World"));
    hi.setGlassPane(new Painter() {
        @Override
        public void paint(Graphics aGraphics, Rectangle aRectangle) {
            int width = hi.getWidth();
            int height = hi.getHeight();
            int size = Math.min(width, height) * 2 / 3;
            aGraphics.setColor(0xff0000);
            aGraphics.fillRoundRect((width - size) / 2, (height - size) / 2, size, size, size / 4, size / 4);
        }
    });
    hi.getToolbar().addCommandToRightBar(new Command("Other") {
        @Override
        public void actionPerformed(ActionEvent aActionEvent) {
            Form form = new Form("Other Form");
            form.getToolbar().addCommandToLeftBar(new Command("Back") {
                @Override
                public void actionPerformed(ActionEvent aActionEvent) {
                    hi.showBack();
                }
            });
            form.setGlassPane(new Painter() {
                @Override
                public void paint(Graphics aGraphics, Rectangle aRectangle) {
                    int width = hi.getWidth();
                    int height = hi.getHeight();
                    int size = Math.min(width, height) * 2 / 3;
                    aGraphics.setColor(0x2020ff);
                    aGraphics.fillRoundRect((width - size) / 2, (height - size) / 2, size, size, size / 4, size / 4);
                }
            });
            form.show();
        }
    });
    hi.show();

导航：

import React, {Component} from 'react';
import {Platform, StyleSheet, View, YellowBox, Dimensions, AppRegistry, 
Image, TouchableOpacity, AsyncStorage,} from 'react-native';
import axios from 'axios';
import {Container, Header, Title, Content, Footer, FooterTab, Button, Left, Right, Body, Icon, Text, Item, Input,Toast} from 'native-base';
import {
createSwitchNavigator,
createAppContainer,
createStackNavigator,
createDrawerNavigator,
} 
from 'react-navigation';

import Fa5Icons from 'react-native-vector-icons/FontAwesome5';
import Mat5Icons from 'react-native-vector-icons/MaterialCommunityIcons';
import MaterialIcons from 'react-native-vector-icons/MaterialIcons';

import AuthLoadingScreen from './Screens/AuthLoadingScreen';
import SignInScreen from './Screens/SignInScreen';
import DriverSettingScreen from './Screens/DriverSettingScreen';
import DriverHistoryScreen from './Screens/DriverHistoryScreen';
import DriverDashScreen from './Screens/DriverDashScreen';
import DriverNotificationScreen from './Screens/DriverNotificationScreen';
import DriverAssignOrderScreen from './Screens/DriverAssignOrderScreen';
import DriverProfileScreen from './Screens/DriverProfileScreen';

我的操作按钮：

 const AuthStackNavigator = createStackNavigator({
 SignIn: SignInScreen,
 });

let that = this;
const stackNav = createStackNavigator({
DriverDashScreen: {
screen: DriverDashScreen,

navigationOptions: ({ navigation }) => ({

})
},
DriverAssignOrderScreen: {
screen: DriverAssignOrderScreen,

navigationOptions: ({ navigation }) => ({

})
},
DriverHistoryScreen: {
screen: DriverHistoryScreen,
navigationOptions: ({ navigation }) => ({

})
},
DriverNotificationScreen: {
 screen: DriverNotificationScreen,
navigationOptions: ({ navigation }) => ({

})
},
DriverSettingScreen: {
screen: DriverSettingScreen,
navigationOptions: ({ navigation }) => ({


  })
 },
})
 const AppDrawerNavigator = createDrawerNavigator({
 Home:stackNav,
})

export default createAppContainer(createSwitchNavigator({
AuthLoading: AuthLoadingScreen,
Auth:AuthStackNavigator,
App: AppDrawerNavigator,
},
{
initialRouteName: 'AuthLoading',

}
))

有没有办法使用React Navigation创建不包含在BottomTabNavigator中的导航？

1 个答案: