基于React Native构建的仿京东客户端（五）如何实现首页 分类 发现 购物车 我的 Tab导航页面

新建4个用红色方框标识的文件，如下图所示：

myths-Mac:JdApp myth$ yarn add react-native-tab-navigator

CartPage.js文件完整的代码如下：

import React, { Component } from 'react';
import {
  StyleSheet,
  Text,
  View
} from 'react-native';

export default class CartPage extends Component {
  render() {
    return (
      <View style={styles.container}>
         <Text>CartPage</Text>
      </View>
    );
  }
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
    backgroundColor: '#F5FCFF',
  }
});

CategoryPage.js文件完整的代码如下：

import React, { Component } from 'react';
import {
  StyleSheet,
  Text,
  View
} from 'react-native';

export default class CategoryPage extends Component {
  render() {
    return (
      <View style={styles.container}>
         <Text>CategoryPage</Text>
      </View>
    );
  }
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
    backgroundColor: '#F5FCFF',
  }
});

DiscoverPage.js文件完整的代码如下：

import React, { Component } from 'react';
import {
  StyleSheet,
  Text,
  View
} from 'react-native';

export default class DiscoverPage extends Component {
  render() {
    return (
      <View style={styles.container}>
         <Text>DiscoverPage</Text>
      </View>
    );
  }
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
    backgroundColor: '#F5FCFF',
  }
});

PersonalPage.js文件完整的代码如下：

import React, { Component } from 'react';
import {
  StyleSheet,
  Text,
  View
} from 'react-native';

export default class PersonalPage extends Component {
  render() {
    return (
      <View style={styles.container}>
         <Text>DiscoverPage</Text>
      </View>
    );
  }
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
    backgroundColor: '#F5FCFF',
  }
});

App.js文件完整的代码如下：

import React, { Component } from 'react';
import {
  StyleSheet,
  Text,
  View,
  Image
} from 'react-native';
import Header from './Header';
import HomePage from './home/HomePage';
import CategoryPage from './category/CategoryPage';
import DiscoverPage from './discover/DiscoverPage';
import CartPage from './cart/CartPage';
import PersonalPage from './personal/PersonalPage';
import TabNavigator from 'react-native-tab-navigator';

export default class App extends Component {
    constructor(props) {
        super(props);
        this.state = {
            selectedTab: 'home',
            homeBadgeText:'15',
            categoryBadgeText:'',
            discoverBadgeText:'',
            cartBadgeText:'',
            personalBadgeText:'',
        }
    }

    render() {
        return (
            <View style={styles.container}>
                <Header/>
                <TabNavigator hidesTabTouch={true} tabBarStyle={styles.tab}>
                    <TabNavigator.Item
                        selected={this.state.selectedTab === 'home'}
                        selectedTitleStyle={{color: "#3496f0"}}
                        renderIcon={() => <Image style={styles.tabIcon} source={require('./images/tabs/home_normal.png')} />}
                        renderSelectedIcon={() => <Image style={styles.tabIcon} source={require('./images/tabs/home_focus.png')} />}
                        renderBadge={() =>
                            this.state.homeBadgeText === ''? null:
                            <View style={{alignItems:'center',backgroundColor:'red', width:22, borderRadius: 100, borderColor: '#d6d7da'}}>
                               <Text style={{color: '#fff',fontSize:12}}>{this.state.homeBadgeText}</Text>
                            </View>
                        }
                        onPress={() => this.setState({selectedTab: 'home'})}>
                        <HomePage/>
                    </TabNavigator.Item>
                    <TabNavigator.Item
                        selected={this.state.selectedTab === 'category'}
                        selectedTitleStyle={{color: "#3496f0"}}
                        renderIcon={() => <Image style={styles.tabIcon} source={require('./images/tabs/category_normal.png')} />}
                        renderSelectedIcon={() => <Image style={styles.tabIcon} source={require('./images/tabs/category_focus.png')} />}
                        renderBadge={() =>
                          this.state.categoryBadgeText === ''? null:
                          <View style={{alignItems:'center',backgroundColor:'red', width:22, borderRadius: 100, borderColor: '#d6d7da'}}>
                             <Text style={{color: '#fff',fontSize:12}}>{this.state.categoryBadgeText}</Text>
                          </View>
                        }
                        onPress={() => this.setState({selectedTab: 'category'})}>
                        <CategoryPage/>
                    </TabNavigator.Item>
                    <TabNavigator.Item
                        selected={this.state.selectedTab === 'discover'}
                        selectedTitleStyle={{color: "#3496f0"}}
                        renderIcon={() => <Image style={styles.tabIcon} source={require('./images/tabs/discover_normal.png')} />}
                        renderSelectedIcon={() => <Image style={styles.tabIcon} source={require('./images/tabs/discover_focus.png')} />}
                        renderBadge={() =>
                          this.state.discoverBadgeText === ''? null:
                          <View style={{alignItems:'center',backgroundColor:'red', width:22, borderRadius: 100, borderColor: '#d6d7da'}}>
                             <Text style={{color: '#fff',fontSize:12}}>{this.state.discoverBadgeText}</Text>
                          </View>
                        }
                        onPress={() => this.setState({selectedTab: 'discover'})}>
                        <DiscoverPage/>
                    </TabNavigator.Item>
                    <TabNavigator.Item
                        selected={this.state.selectedTab === 'cart'}
                        selectedTitleStyle={{color: "#3496f0"}}
                        renderIcon={() => <Image style={styles.tabIcon} source={require('./images/tabs/cart_normal.png')} />}
                        renderSelectedIcon={() => <Image style={styles.tabIcon} source={require('./images/tabs/cart_focus.png')} />}
                        renderBadge={() =>
                          this.state.cartBadgeText === ''? null:
                          <View style={{alignItems:'center',backgroundColor:'red', width:22, borderRadius: 100, borderColor: '#d6d7da'}}>
                             <Text style={{color: '#fff',fontSize:12}}>{this.state.cartBadgeText}</Text>
                          </View>
                        }
                        onPress={() => this.setState({selectedTab: 'cart'})}>
                        <CartPage/>
                    </TabNavigator.Item>
                    <TabNavigator.Item
                        selected={this.state.selectedTab === 'personal'}
                        selectedTitleStyle={{color: "#3496f0"}}
                        renderIcon={() => <Image style={styles.tabIcon} source={require('./images/tabs/personal_normal.png')} />}
                        renderSelectedIcon={() => <Image style={styles.tabIcon} source={require('./images/tabs/personal_focus.png')} />}
                        renderBadge={() =>
                          this.state.personalBadgeText === ''? null:
                          <View style={{alignItems:'center',backgroundColor:'red', width:22, borderRadius: 100, borderColor: '#d6d7da'}}>
                             <Text style={{color: '#fff',fontSize:12}}>{this.state.personalBadgeText}</Text>
                          </View>
                        }
                        onPress={() => this.setState({selectedTab: 'personal'})}>
                        <PersonalPage/>
                    </TabNavigator.Item>
                </TabNavigator>
            </View>
        );
    }
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
  },
  tab: {
      height: 54,
      backgroundColor: '#303030',
      flexDirection: 'row',
  },
  tabIcon: {
      width: 30,
      height: 35,
      resizeMode: 'stretch',
  }
});

App.js文件中新增加的代码下图已用方框标出：

安卓和苹果手机在模拟器中运行的效果截图如下：