版权声明:本文为博主原创文章,未经博主允许不得转载。 https://blog.csdn.net/jing85432373/article/details/54342756
1.下载
npm install react-native-tab-navigator –save下载
2. 导入
import TabNavigator from 'react-native-tab-navigator'3. 完整代码
import React, {Component} from 'react';
import {
StyleSheet,
View,
Image
} from 'react-native';
import TabNavigator from 'react-native-tab-navigator'
import PosRN from '../index.ios'
import Mine from './mine'
import Cart from './cart'
export default class Main extends Component {
constructor(props){
super(props)
this.state={
selectedTab:'首页',
}
}
render() {
return (
<View style={styles.container} >
<TabNavigator>
<TabNavigator.Item
selected={this.state.selectedTab === '首页'}
title="首页"
titleStyle={styles.tabText}
selectedTitleStyle={styles.selectedTabText}
renderIcon={() => <Image style={styles.icon} source={require("../images/ic_home_normal.png")} />}
renderSelectedIcon={() => <Image style={styles.icon} source={require("../images/ic_home_checked.png")} />}
onPress={() => this.setState({ selectedTab: '首页' })}>
<PosRN/>
</TabNavigator.Item>
<TabNavigator.Item
selected={this.state.selectedTab === '购物车'}
title="购物车"
titleStyle={styles.tabText}
selectedTitleStyle={styles.selectedTabText}
renderIcon={() => <Image style={styles.icon} source={require("../images/ic_cart_normal.png")} />}
renderSelectedIcon={() => <Image style={styles.icon} source={require("../images/ic_cart_checked.png")} />}
onPress={() => this.setState({ selectedTab: '购物车' })}>
<Cart />
</TabNavigator.Item>
<TabNavigator.Item
selected={this.state.selectedTab === '我的'}
title="我的"
titleStyle={styles.tabText}
selectedTitleStyle={styles.selectedTabText}
renderIcon={() => <Image style={styles.icon} source={require("../images/ic_user_normal.png")} />}
renderSelectedIcon={() => <Image style={styles.icon} source={require("../images/ic_user_checked.png")} />}
onPress={() => this.setState({ selectedTab: '我的' })}>
<Mine />
</TabNavigator.Item>
</TabNavigator>
</View>
);
}
}
let styles = StyleSheet.create({
container: {
flex: 1
},
tabText: {
color: "#000000",
fontSize: 13
},
selectedTabText: {
color: "#999999",
fontSize: 13
},
icon: {
width: 20,
height: 20
}
});