新建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文件中新增加的代码下图已用方框标出:
安卓和苹果手机在模拟器中运行的效果截图如下: