React Navigation导航器之createBottomTabNavigator实现APP首页底部导航的效果

API

  • createBottomTabNavigator(RouteConfigs,BottomTabNavigatorConfig)

参数说明

RouteConfigs

navigationOptions
  1. title:底部tab上的文字,如:“首页”,“我的”
  2. tabBarVisibletabBarVisible:Boolean是否显示tabBar,如果是false将隐藏底部tabBar,默认true
  3. tabBarIcon:设置title上面的icon。
    值为组件或方法,当它的值是方法的时候此方法接收{ focused, horizontal, tintColor}作为参数(此方法的返回值应该是一个组件)
    horizontal:手机屏幕横着的时候horizontal为true,否则为false,当设备方向发生改变时icon重新渲染。
    focused:当前tab选中的时候focused为true否则为false
    tintColor:当前tab选中的时候值为tabBarOptions中的activeTintColor,否则为tabBarOptions中的inactiveTintColor
  4. tabBarLabel:它的值可以是字符串、组件、方法;如果是方法那么此方法接收{ focused: boolean, tintColor: string }。未设置此属性时,title发挥作用
  5. tabBarButtonComponent:值为组件
  6. tabBarTestID:tab button的ID
  7. tabBarOnPress:Function 参数为包含navigationdefaultHandler的对象。

BottomTabNavigatorConfig

  1. initialRouteName :打开tabBar页面的时候显示的第一个页面的路由名称,它的值为RouteConfigs的一个key
  2. order:由RouteConfigs的key组成的一个数组,按照数组的顺序显示tabs
  3. backBehavior:按下返回键时的行为,initialRoute返回initialRouteName对应的页面。none返回上一页面。默认initialRoute
  4. lazy:Boolean默认true。如果为false的时候会把所有的tabs对应的页面渲染。true的时候只会打开页面的时候进行渲染
  5. tabBarComponent:
  6. tabBarOptions:object
tabBarOptions:{
    	activeTintColor:"",//活跃状态的label和icon颜色
	    activeBackgroundColor:"",活跃状态的tab背景色
    	inactiveTintColor:"",//非活跃状态的label和icon颜色
    	inactiveBackgroundColor:"",//非活跃状态的tab背景色
    	showLabel:true,//是否显示tab上的文字,默认true
    	showIcon:true,//是否显示tab上的icon,默认true
    	style:{//tabBar的样式
    	},
    	labelStyle:{//tabBar上label的样式
    	},
    	tabStyle:{//tabBar上tab的样式
    	},
    	allowFontScaling:true,//
    }

示例

如果BottomTabBar要使用icon需要运行以下两条命令

yarn add react-native-vector-icons
react-native link react-native-vector-icons

App.js

import React from 'react'
import {
    createStackNavigator,
    createBottomTabNavigator,
    createAppContainer
} from 'react-navigation'
import Detail from './components/Detail'
import Home from "./components/Home";
import My from "./components/My";
import Ionicons from 'react-native-vector-icons/Ionicons'

const BottomNavigator = createBottomTabNavigator(
    {
        Home: {
            screen: Home,
            navigationOptions: {
                title: "首页",
                tabBarIcon:({ focused, horizontal, tintColor })=>{
                    return <Ionicons name={'ios-home'} size={25} style={{color:tintColor}}/>
                }
            }
        },
        Detail: {
            screen: Detail,
            navigationOptions: {
                title: "详情",
                tabBarIcon:({ focused, horizontal, tintColor })=>{
                    return <Ionicons name={'ios-heart'} size={25} style={{color:tintColor}}/>
                }
            }
        },
        My: {
            screen: My,
            navigationOptions: {
                title: "我的",
                tabBarIcon:({focused,horizontal,tintColor})=>{
                    return <Ionicons name={'logo-octocat'} size={25} style={{color:tintColor}}/>
                }
            }
        }
    },
    {
        tabBarOptions:{
            activeTintColor:"red"
        }
    }
)

const StackNavigator = createStackNavigator(
    {
        Home: {
            screen: BottomNavigator,
            navigationOptions: {
                title: "首页"
            }
        }
    },
    {
        initialRouteName: "Home",
        headerLayoutPreset: "center"
    }
)

export default createAppContainer(StackNavigator)

Home.js

import React from 'react'
import {View, Text, Button} from 'react-native'

export default class Home extends React.Component{
    render(){
        return (
            <View>
                <Text>Home</Text>
            </View>
        )
    }
}

Detail.js

import React from 'react'
import {View, Text, Button} from 'react-native'

export default class Detail extends React.Component{
    render(){
        return (
            <View>
                <Text>Detail</Text>
            </View>
        )
    }
}

My.js

import React from 'react'
import {View, Text, Button} from 'react-native'

export default class My extends React.Component{
    render(){
        return (
            <View>
                <Text>个人中心</Text>
            </View>
        )
    }
}

效果图

  • 3
    点赞
  • 3
    收藏
    觉得还不错? 一键收藏
  • 2
    评论
React Native 提供了一种方便的方式来创建底部导航栏。你可以使用第三方库,比如 `react-navigation` 或 `react-native-navigation`,来实现底部导航。 下面是使用 `react-navigation` 库创建底部导航的简单示例: 1. 首先,确保你已经安装了 `react-navigation` 库: ``` npm install @react-navigation/native ``` 2. 创建一个底部导航的组件: ```jsx import React from 'react'; import { createBottomTabNavigator } from '@react-navigation/bottom-tabs'; import { NavigationContainer } from '@react-navigation/native'; import { FontAwesomeIcon } from '@fortawesome/react-native-fontawesome'; import { faHome, faUser } from '@fortawesome/free-solid-svg-icons'; const Tab = createBottomTabNavigator(); const BottomTabNavigator = () => { return ( <NavigationContainer> <Tab.Navigator> <Tab.Screen name="Home" component={HomeScreen} options={{ tabBarIcon: ({ color, size }) => ( <FontAwesomeIcon icon={faHome} color={color} size={size} /> ), }} /> <Tab.Screen name="Profile" component={ProfileScreen} options={{ tabBarIcon: ({ color, size }) => ( <FontAwesomeIcon icon={faUser} color={color} size={size} /> ), }} /> </Tab.Navigator> </NavigationContainer> ); }; export default BottomTabNavigator; ``` 在上面的示例中,我们创建了一个包含两个屏幕(Home 和 Profile)的底部导航栏。我们使用了 `@fortawesome/react-native-fontawesome` 库来渲染图标,你也可以选择其他的图标库。 3. 创建 HomeScreen 和 ProfileScreen 组件,并实现它们的功能。 4. 在入口文件中使用底部导航组件: ```jsx import React from 'react'; import BottomTabNavigator from './BottomTabNavigator'; const App = () => { return <BottomTabNavigator />; }; export default App; ``` 这样,你就可以在 React Native 应用中使用底部导航栏了。当然,还有其他一些配置和功能可以使用,请参考 `react-navigation` 的文档以获取更多信息。
评论 2
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值