复杂的tab导航设计

image.png

1. 各子组件模块：Sub.js

import { View,StyleSheet ,Text} from "react-native"
import React from 'react'
import {createBottomTabNavigator} from '@react-navigation/bottom-tabs'
import AntDesign from "react-native-vector-icons/AntDesign"
import Feather from "react-native-vector-icons/Feather"

let Tab=createBottomTabNavigator()

function Home({navigation}){
    return <View style={styles.subView}>
        <Text style={styles.txt}>Home</Text>
        <AntDesign name="wifi" color={"green"} size={60} onPress={()=>navigation.navigate("Settings",{screen:"Wifi"})}/>
        <Feather name="bluetooth" color={"blue"} size={60} onPress={()=>navigation.navigate("Settings",{screen:"BlueTooth"})}/>
    </View>
}
function About(){
    return <View style={styles.subView}>
        <Text style={styles.txt}>About</Text>
    </View>
}

function Settings(){
    function _screen({route}){
        let iconName;
        return {
            tabBarIcon:({color})=>{
                switch(route.name){
                    case 'Wifi':
                        return <AntDesign name={'wifi'} size={20} color={color}/>
                        
                    case 'BlueTooth':
                        return <Feather name={'bluetooth'} size={20} color={color}/>    
                }
                
            }
        }
    }
    return <Tab.Navigator screenOptions={_screen}>
        <Tab.Screen name="Wifi" component={Wifi}/>
        <Tab.Screen name="BlueTooth" component={BlueTooth}/>
    </Tab.Navigator>
}

function Wifi(){
    return <View style={styles.subView}>
        <Text style={styles.txt}>Wifi</Text>
    </View>
}
function BlueTooth(){
    return <View style={styles.subView}>
        <Text style={styles.txt}>BlueTooth</Text>
    </View>
}

const styles=StyleSheet.create({
    txt:{fontSize:60},
    subView:{marginTop:0}
})

export  {Home,About,Settings}

2. App.js

import { NavigationContainer } from '@react-navigation/native'
import {createBottomTabNavigator} from '@react-navigation/bottom-tabs'
import React, { Component } from 'react'
import { StatusBar} from 'react-native'
import AntDesign from "react-native-vector-icons/AntDesign"
import {Home,About,Settings} from './Sub'
let Tab=createBottomTabNavigator()
export default class App extends Component {
  _screen=({route})=>{
    let iconName;
    return {tabBarIcon:({color})=>{
      switch(route.name){
        case "Home":
          iconName="home"
          break;
        case "About":
          iconName='earth'
          break;
        case "Settings":
          iconName="dingding"
          break;
      }
      return <AntDesign name={iconName} size={30} color={color}/>
    }}
  }
  render() {
    return (
      <NavigationContainer>
        <StatusBar hidden={true}/>
        <Tab.Navigator sceneContainerStyle={{paddingTop:100}} screenOptions={this._screen} tabBarOptions={{activeTintColor:'tomato',labelStyle:{fontSize:30},style:{height:80,position:'absolute',top:0}}}>
          <Tab.Screen name="Home" options={{tabBarBadge:3}} component={Home}/>
          <Tab.Screen name="About" component={About}/>
          <Tab.Screen name="Settings" component={Settings}/>
        </Tab.Navigator>
      </NavigationContainer>
    )
  }
}