新建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 (

CartPage

);

}

}

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 (

CategoryPage

);

}

}

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 (

DiscoverPage

);

}

}

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 (

DiscoverPage

);

}

}

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 (

selected={this.state.selectedTab === 'home'}

selectedTitleStyle={ {color: "#3496f0"}}

renderIcon={() => }

renderSelectedIcon={() => }

renderBadge={() =>

this.state.homeBadgeText === ''? null:

{this.state.homeBadgeText}

}

onPress={() => this.setState({selectedTab: 'home'})}>

selected={this.state.selectedTab === 'category'}

selectedTitleStyle={ {color: "#3496f0"}}

renderIcon={() => }

renderSelectedIcon={() => }

renderBadge={() =>

this.state.categoryBadgeText === ''? null:

{this.state.categoryBadgeText}

}

onPress={() => this.setState({selectedTab: 'category'})}>

selected={this.state.selectedTab === 'discover'}

selectedTitleStyle={ {color: "#3496f0"}}

renderIcon={() => }

renderSelectedIcon={() => }

renderBadge={() =>

this.state.discoverBadgeText === ''? null:

{this.state.discoverBadgeText}

}

onPress={() => this.setState({selectedTab: 'discover'})}>

selected={this.state.selectedTab === 'cart'}

selectedTitleStyle={ {color: "#3496f0"}}

renderIcon={() => }

renderSelectedIcon={() => }

renderBadge={() =>

this.state.cartBadgeText === ''? null:

{this.state.cartBadgeText}

}

onPress={() => this.setState({selectedTab: 'cart'})}>

selected={this.state.selectedTab === 'personal'}

selectedTitleStyle={ {color: "#3496f0"}}

renderIcon={() => }

renderSelectedIcon={() => }

renderBadge={() =>

this.state.personalBadgeText === ''? null:

{this.state.personalBadgeText}

}

onPress={() => this.setState({selectedTab: 'personal'})}>

);

}

}

const styles = StyleSheet.create({

container: {

flex: 1,

},

tab: {

height: 54,

backgroundColor: '#303030',

flexDirection: 'row',

},

tabIcon: {

width: 30,

height: 35,

resizeMode: 'stretch',

}

});

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

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