rn 底部导航

向右看齐 2021-07-24 19:46 555阅读 0赞

(1)安装
    	yarn add @react-navigation/native
    	yarn add react-native-gesture-handler react-native-reanimated react-native-screens react-native-safe-area-context @react-native-community/masked-view
    	
    (2)在最顶部导入
    	import 'react-native-gesture-handler';
    
    (3)导入导航栏容器
    	import { NavigationContainer } from '@react-navigation/native';
    
    (4)将整个导航内容包裹在在导航栏容器内
    	export default function App() {
    	  return (
    	    <NavigationContainer>xxx</NavigationContainer> //若是嵌套导航,子导航不能设置该容器
    	    );
    	}
    	
    （5)使用
    	yarn add @react-navigation/bottom-tabs
    	
    	import { createBottomTabNavigator } from '@react-navigation/bottom-tabs';
    	const Tab = createBottomTabNavigator();
    
    	<Tab.Navigator>
          <Tab.Screen name="Home" component={HomeScreen} />
          <Tab.Screen name="Settings" component={SettingsScreen} />
        </Tab.Navigator>
    
    	其中:
    	
    	(1)Tab.Navigator属性:
    		initialRouteName='默认路由名'
    		
    		tabBarOptions={
       {  //设置底部导航,每个方块
    	        activeTintColor: 'green',  //选中字体颜色
    	        activeBackgroundColor:'orange',   //选中方块背景颜色
    	        labelStyle:{ //设置tab中的字体样式
    	           fontSize:18, 
    	           fontWeight:'bold'  //这里只能设置bold,数字无效
    	          }
     		 }}
     	
      	(2)Tab.Screens属性:
      	
      		options={
       {
    				title:'页面顶部标题',
    				tabBarLabel:'导航栏字体内容',
    				
    				tabBarIcon:({ color, size,focused }) => ( //设置导航栏图标
    					//返回一个组件,组件为字体图标/图片，focused选中时为真,否则为假
            			focused? <Icon name="list" size={25} color='green' />:<Icon name="list" size={20}  />
            		  //使用图片代替字体图标  <Image style={
       {height:40, width:40}}  source={image} />
        		 )
    		}}

代码示例:

import * as React from 'react';
    import {  Text, View } from 'react-native';
    import {  NavigationContainer } from '@react-navigation/native';
    import {  createBottomTabNavigator } from '@react-navigation/bottom-tabs';
    import Icon from 'react-native-vector-icons/FontAwesome'
    
    import HomePage from '../home/homePage';
    import CatePage from '../cate/catePage';
    import MinePage from '../mine/minePage';
    
    const Tab = createBottomTabNavigator();
    
    function title(){ 
    
    }
    
    export default function App() { 
      return (
          <>
         
    
          <Tab.Navigator initialRouteName='HomePage'
    
          //记录
          //设置每个单独的tab方块区域样式 
          tabBarOptions={ { 
            activeTintColor: 'green',
            activeBackgroundColor:'orange',
            //设置tab中的字体样式
            labelStyle:{ 
               fontSize:18,
               fontWeight:'bold'
              }
          }}
    
    
          
          >
            
              { /* 记录 */}
            <Tab.Screen name="HomePage" component={ HomePage} options={ { title:'首页',tabBarLabel:'首页',
              tabBarIcon: ({  color, size,focused }) => (
                 focused? <Icon name="book" size={ 25} color='green' />:<Icon name="book" size={ 20}  />
              )
              //使用图片代替字体图标 <Image style={ {height:40, width:40}} source={image} />
            }} />
            <Tab.Screen name="CatePage" component={ CatePage} options={ { title:'分类',tabBarLabel:'分类',
               tabBarIcon: ({  color, size,focused }) => (
                focused? <Icon name="list" size={ 25} color='green' />:<Icon name="list" size={ 20}  />
             )
          }}/>
            <Tab.Screen name="MinePage" component={ MinePage} options={ { title:'我的',tabBarLabel:'我的',
               tabBarIcon: ({  color, size,focused }) => (
                focused? <Icon name="home" size={ 25} color='green' />:<Icon name="home" size={ 20}  />
             )     
          }}/>
          </Tab.Navigator>
          </>
      );
    }