react-native从入门到精通搭建app(九) 一一 标签导航和抽屉导航嵌套使用
文章 1983 0 0 0
发布时间:2019年09月23日

九、标签导航和抽屉导航嵌套使用

前面几个例子我们看到了要不只有底部导航,要不只有侧栏导航,但是怎么让底部导航跟侧栏导航一起使用呢那我们就有点犯难,下面教大家嵌套使用侧栏和底部导航

侧栏导航用的是createDrawerNavigator创建的

底部导航用的是createBottomTabNavigator创建的

单独使用是直接createAppContainer(侧栏或底部)

嵌套使用的话我们要用到createStackNavigator为您的应用提供一种在每个新屏幕都放在堆栈顶部的屏幕之间过渡的方式。

使用createStackNavigator关联侧栏和底部导航

他们直接的关系就是

 var DrawerNavigator =  createDrawerNavigator({}) ;
 var TabNavigator =  createBottomTabNavigator({DrawerNavigator }) ;
 var StackNavigator =  createStackNavigator({TabNavigator}) ;
 var AppContainer =  createAppContainer(StackNavigator);

由此导出得到如下图:

react-native从入门到精通搭建app(九) 一一 标签导航和抽屉导航嵌套使用

app.js代码如下

import React from 'react';
import { createAppContainer,createSwitchNavigator } from 'react-navigation';
import { createStackNavigator } from 'react-navigation-stack';
import { createBottomTabNavigator } from 'react-navigation-tabs';
import { createDrawerNavigator } from 'react-navigation-drawer';
import { Button, Text, View, StyleSheet, Image } from 'react-native';
class FeedScreen extends React.Component {
  static navigationOptions = {
    drawerLabel: 'Notifications',
    drawerIcon: ({ tintColor }) => (
      <Image
        source={require('./src/assets/title.png')}
        style={[styles.icon, { tintColor: tintColor }]}
      />
    ),
  };
  render() {
    return (
      <Button
        onPress={() => this.props.navigation.toggleDrawer()}
        title="我是第二个1"
      />
    );
  }
}
class ProfileScreen extends React.Component {
  static navigationOptions = {
    drawerLabel: 'Notifications',
    drawerIcon: ({ tintColor }) => (
      <Image
        source={require('./src/assets/title.png')}
        style={[styles.icon, { tintColor: tintColor }]}
      />
    ),
  };
  render() {
    return (
      <Button
        onPress={() => this.props.navigation.toggleDrawer()}
        title="我是第二个2"
      />
    );
  }
}
class DetailsScreen extends React.Component {
  static navigationOptions = {
    drawerLabel: 'Notifications',
    drawerIcon: ({ tintColor }) => (
      <Image
        source={require('./src/assets/title.png')}
        style={[styles.icon, { tintColor: tintColor }]}
      />
    ),
  };
  render() {
    return (
      <Button
        onPress={() => this.props.navigation.toggleDrawer()}
        title="我是第二个3"
      />
    );
  }
}
class SettingsScreen extends React.Component {
  static navigationOptions = {
    drawerLabel: 'Notifications',
    drawerIcon: ({ tintColor }) => (
      <Image
        source={require('./src/assets/title.png')}
        style={[styles.icon, { tintColor: tintColor }]}
      />
    ),
  };
  render() {
    return (
      <Button
        onPress={() => this.props.navigation.toggleDrawer()}
        title="我是第二个4"
      />
    );
  }
}
const styles = StyleSheet.create({
  icon: {
    width: 24,
    height: 24,
  },
});
const bottomTabNavigator = createBottomTabNavigator(
  {
    Home: FeedScreen,
    Shopping: FeedScreen,
    Cart:FeedScreen,
    Find:FeedScreen,
    User:FeedScreen,
  },
  {
    defaultNavigationOptions: ({ navigation }) => ({
      tabBarIcon: ({ focused, horizontal, tintColor }) => {
        const { routeName } = navigation.state;
        let iconName;
        if (routeName === 'Home') {
          iconName = 'home';
        }
        if (routeName === 'Shopping') {
          iconName = "shopping-bag";
        }
        if (routeName === 'Cart') {
          iconName = "shopping-cart";
        }
        if (routeName === 'Find') {
          iconName = "file";
        }
        if (routeName === 'User') {
          iconName = "user";
        }
        // You can return any component that you like here! We usually use an
        // icon component from react-native-vector-icons
        // return <Ionicons name={iconName} size={horizontal ? 20 : 25} color={tintColor} />;
        return ''
      },
    }),
    tabBarOptions: {
      activeTintColor: 'rgb(4,127,116)',
      inactiveTintColor: 'gray',
    },
  }
);
const DrawerNavigator = createDrawerNavigator({
  Feeds: bottomTabNavigator,
  Profile: ProfileScreen,
});
const  AppStack = createStackNavigator({
  bottomTabNavigator:{
    screen : DrawerNavigator,
    navigationOptions:{
      header :null
    }
  },
//全局的stack 
  Details:{
    screen : DetailsScreen,
    navigationOptions:{
      title :"This is the details"
    }
  },
  initialRouteName:'bottomTabNavigator'
})
const AppContainer = createAppContainer(AppStack);
export default class App extends React.Component {
  render() {
    return <AppContainer />;
  }
}

具体配置查看官网手册

评论专区