react-native-navigator-tabbar
react-native底部导航栏
Overview
Mobile bottom tab bar using react-native,support android and ios. Pages won't be rendered when you switch to other tabs,also save the status of invisible pages.
Installation
First you need to install react-native-navigator-tabbar:
npm install react-native-navigator-tabbar --save
Props
Tabbar
prop | value | required/optional | comment |
---|---|---|---|
onItemSelected | function | optional | this function will be called when the focus item changing |
navTextColor | color | optional | nav text normal color |
navTextColorSelected | color | optional | nav text selected color |
Tabbar.Item
prop | value | required/optional | comment |
---|---|---|---|
icon | image source | required | the icon when item is not focus |
selectedIcon | image source | required | the icon when item is focus |
title | string | required | title of item |
onPress | function | optional | the function will be called when item is selected. you can also use Tabbar's onItemSelected function if you want to control press callback in one place. |
badge | number/string | optional | badge |
point | bool | optional | clipChildren performance |
Usage
; <TabBar style=stylescontent onItemSelected= {console;}> <TabBarItem icon= selectedIcon= onPress= { // do sth } badge=7 title='首页'> <View style=stylestext> <Text style=fontSize: 18>Home</Text> </View> </TabBarItem> <TabBarItem icon= selectedIcon= title='定位'> <View style=stylestext> <Text style=fontSize: 18>Location</Text> </View> </TabBarItem> <TabBarItem icon= selectedIcon= title='发现'> <View style=stylestext> <Text style=fontSize: 18>Find</Text> </View> </TabBarItem> <TabBarItem icon= selectedIcon= title='我'> <View style=stylestext> <Text style=fontSize: 18>Me</Text> </View> </TabBarItem></TabBar>
Screenshot