1.0.1 • Published 4 years ago
amber-design-react-native-tab-navigation v1.0.1
amber-design-react-native-tab-navigation
The tag bar component is mainly used for bottom navigation, which is convenient for users to switch between different functional modules quickly. It is suggested that the number of tags should be controlled within 3-5.
Installation
Installation is done using the npm install command:
$ npm install amber-design-react-native-tab-navigation
Demo (Default Style)
Quick Start
import React from 'react';
import { View, SafeAreaView, Text } from 'react-native';
import TabNav from 'amber-design-react-native-tab-navigation'
export default class App extends React.Component{
state = {
currentPageIndex: 0,
tabInfo:[{
id: 1,
label: 'Home',
icon: 'home',
color:'#10A8F6',
backgroundColor:'#E9F8FF'
},{
id: 2,
label: 'Book',
icon: 'book',
color:'#F65E10',
backgroundColor:'#FFF1E9'
},{
id: 3,
label: 'New',
icon: 'plus',
color:'#07A70A',
backgroundColor:'#F2FFE9'
},{
id: 4,
label: 'Search',
icon: 'search',
color:'#A79507',
backgroundColor:'#FFFBDC'
},{
id: 5,
label: 'Me',
icon: 'user',
color:'#7B14DA',
backgroundColor:'#EBDAFA'
}]
}
handlePressTab = (pageValue) => {
this.setState({currentPageIndex: pageValue})
}
render(){
const { currentPageIndex, tabInfo } = this.state
let mainPage = <View><Text>Home</Text></View>
if(currentPageIndex === 2){
mainPage = <View><Text>Book</Text></View>
} else if (currentPageIndex === 3){
mainPage = <View><Text>New</Text></View>
} else if (currentPageIndex === 4){
mainPage = <View><Text>Search</Text></View>
} else if (currentPageIndex === 5){
mainPage = <View><Text>Me</Text></View>
}
return(
<SafeAreaView style={{flex:1}}>
<View style={{flex:1}}>
{mainPage}
<TabBar handlePressTab={this.handlePressTab} tabInfo={tabInfo} currentPageIndex={currentPageIndex}/>
</View>
</SafeAreaView>
)
}
}
Use Tab Navigation with Stack Navigation
You can use this tab Navigation with react native stack navigation as well. Documentation of React Navigation
Example:
import React from 'react';
import { View, SafeAreaView, Text } from 'react-native';
import TabNav from 'amber-design-react-native-tab-navigation'
import { createStackNavigator } from '@react-navigation/stack';
import { NavigationContainer } from '@react-navigation/native';
const Home = ({navigation}) => <View><Text onPress={() => navigation.navigate('HomeDetail')}>Home</Text></View>
const HomeDetail = () => <View><Text>HomeDetail</Text></View>
const HomeStack = createStackNavigator();
function HomeStackScreen() {
return (
<HomeStack.Navigator>
<HomeStack.Screen name="Home" component={Home}/>
<HomeStack.Screen name="HomeDetail" component={HomeDetail}/>
</HomeStack.Navigator>
);
}
export default class App extends React.Component{
state = {
currentPageIndex: 0,
tabInfo:[{
id: 1,
label: 'Home',
icon: 'home',
color:'#10A8F6',
backgroundColor:'#E9F8FF'
},{
id: 2,
label: 'Dairy',
icon: 'book',
color:'#F65E10',
backgroundColor:'#FFF1E9'
},{
id: 3,
label: 'New',
icon: 'plus',
color:'#07A70A',
backgroundColor:'#F2FFE9'
},{
id: 4,
label: 'Search',
icon: 'search',
color:'#A79507',
backgroundColor:'#FFFBDC'
},{
id: 5,
label: 'Me',
icon: 'user',
color:'#7B14DA',
backgroundColor:'#EBDAFA'
}]
}
handlePressTab = (pageValue) => {
this.setState({currentPageIndex: pageValue})
}
render(){
const { currentPageIndex } = this.state
let mainPage = <HomeStackScreen/>
if(currentPageIndex === 2){
mainPage = <View><Text>Book</Text></View>
} else if (currentPageIndex === 3){
mainPage = <View><Text>New Story</Text></View>
} else if (currentPageIndex === 4){
mainPage = <View><Text>Search</Text></View>
} else if (currentPageIndex === 5){
mainPage = <View><Text>Me</Text></View>
}
return(
<SafeAreaView style={{flex:1}}>
<View style={{flex:1}}>
<NavigationContainer>
{mainPage}
</NavigationContainer>
<View style={{height:80, backgroundColor:'#f2f2f2'}}></View>
<TabNav handlePressTab={this.handlePressTab} tabInfo={this.state.tabInfo} currentPageIndex={this.state.currentPageIndex}/>
</View>
</SafeAreaView>
)
}
}
API
Props
Property | Description | Type | Required |
---|---|---|---|
tabInfo | This is an array of the information of the tab navigation. (See more detail in the next table.) | Array | ture |
tabStyle | The style of the tab bar contener. | Style Object | false |
itemStyle | The style of the tab item. | Style Object | false |
currentPageIndex | This is the index of the active item. | Number | true |
handlePressTab | Callback Function when press tab item. This function will get the index of the pressed tab item. | Function | true |
tabInfo Properties
Property | Description | Type | Required |
---|---|---|---|
label | The label displayed in the tab item. | String | true |
icon | The name of the icon you want to use. Feather Icon is suported. You can find the icon and name here. | String | true |
color | The color of the icon and label when the item is active. | Color String | true |
backgroundColor | The color of background when the item is active. | Color String | true |