通過(guò)react-native-tab-navigator實(shí)現(xiàn)下面這樣的底部Tab切換
image.png
安裝
npm install react-native-tab-navigator --save
屬性
- TabNavigator 屬性
| 屬性名 | 描述 |
|---|---|
| sceneStyle | 切換的每一屏的樣式，等同于每一屏根View的樣式 |
| tabBarStyle | TabBar的樣式，控制Item的樣式，和tabStyle有點(diǎn)類(lèi)似 |
| tabBarShadowStyle | TabBar陰影的樣式 |
| hidesTabTouch | true關(guān)閉點(diǎn)擊的透明變化效果，false反之 |
如使用tabBarStyle設(shè)置居中
<TabNavigator
tabBarStyle={{alignItems:'center'}}
>
</TabNavigator>
使用tabStyle設(shè)置居中則為
<TabNavigator.Item
tabStyle={{alignSelf:'center'}}
>
</TabNavigator.Item>
- TabNavigator.Item 屬性
| 屬性名 | 描述 |
|---|---|
| renderIcon | TabBar未選中的Icon |
| renderSelectedIcon | TabBar選中的Icon |
| badgeText | 右上角提示的文字 |
| renderBadge | 提示角標(biāo)渲染方式，function類(lèi)型 |
| title | tabBar的標(biāo)題 |
| titleStyle | TabBar未選中的標(biāo)題樣式 |
| selectedTitleStyle | TabBar選中的標(biāo)題樣式 |
| tabStyle | 設(shè)置TabBar的樣式 |
| selected | 是否選中 |
| onPress | 點(diǎn)擊事件的回調(diào)函數(shù)，控制state |
| allowFontScaling | 是否允許字體縮放，默認(rèn)false |
實(shí)現(xiàn)
import React, { Component } from 'react';
import {
Platform,
StyleSheet,
Text,
View,
Image
} from 'react-native';
import TabNavigator from 'react-native-tab-navigator';
import Home from '../src/Home';
import Article from '../src/Article';
import Order from '../src/Order';
import Owner from '../src/Owner';
const dataSource = [
{icon:require('../image/home_n.png'),selectedIcon:require('../image/home_s.png'),tabPage:'Home',tabName:'首頁(yè)',component:Home},
{icon:require('../image/article_n.png'),selectedIcon:require('../image/article_s.png'),tabPage:'Article',tabName:'文章',component:Article},
{icon:require('../image/order_n.png'),selectedIcon:require('../image/order_s.png'),tabPage:'Order',tabName:'訂單',component:Order},
{icon:require('../image/owner_n.png'),selectedIcon:require('../image/owner_s.png'),tabPage:'Owner',tabName:'我的',component:Owner}
]
var navigation = null;
type Props = {};
export default class App extends Component<Props> {
constructor(props){
super(props);
navigation = this.props.navigation;
this.state = {
selectedTab:'Home'
}
}
render() {
let tabViews = dataSource.map((item,i) => {
return (
<TabNavigator.Item
title={item.tabName}
selected={this.state.selectedTab===item.tabPage}
titleStyle={{color:'black'}}
selectedTitleStyle={{color:'#7A16BD'}}
renderIcon={()=><Image style={styles.tabIcon} source={item.icon}/>}
renderSelectedIcon = {() => <Image style={styles.tabIcon} source={item.selectedIcon}/>}
tabStyle={{alignSelf:'center'}}
onPress = {() => {this.setState({selectedTab:item.tabPage})}}
key={i}
>
<item.component navigation={navigation}/>
</TabNavigator.Item>
);
})
return (
<View style={styles.container}>
<TabNavigator
hidesTabTouch={true}
>
{tabViews}
</TabNavigator>
</View>
);
}
}
const styles = StyleSheet.create({
container: {
flex: 1,
backgroundColor: '#F5FCFF',
},
tabIcon:{
width:23,
height:23,
}
});
Home.js
import React,{ Component } from 'react';
import {
StyleSheet,
Text,
View
} from 'react-native';
type props = {}
export default class Home extends Component<props>{
constructor(props){
super(props);
}
render(){
return (
<View style={styles.container}>
<Text style={styles.text}>首頁(yè)</Text>
</View>
);
}
}
const styles = StyleSheet.create({
container:{
flex:1,
justifyContent:'center',
alignItems:'center',
backgroundColor:'grey'
},
text:{
fontSize:30,
color:'black'
}
});
其他三個(gè)則類(lèi)似
注意
TypeError: undefined is not an object (evaluating 'this.props.navigation.navigate')
通過(guò)這個(gè)傳遞navigation，然后在每一屏里面進(jìn)行跳轉(zhuǎn)。
<item.component navigation={navigation}/>
