1:目录结构
2:App.js页
import {AppStackNavigator} from "./navigations/AppNavigators"; export default AppStackNavigator;
3:AppStackNavigators(路由页)
import React from 'react'; import { createStackNavigator, createTabNavigator, } from 'react-navigation'; import Ionicons from 'react-native-vector-icons/Ionicons'; import Page1 from '../pages/Page1'; import Page2 from '../pages/Page2'; import Page3 from '../pages/Page3'; import Home from '../pages/HomePage' const AppTabNavigators =createTabNavigator({ //底部导航 Page1: { screen:Page1, navigationOptions: { tabBarLabel: 'page1', tabBarIcon: (({tintColor, focused}) => ( //加载小图标 <Ionicons name={focused?'ios-home':'ios-home-outline'} size={26} style={{color:tintColor}} /> )) }, }, Page2:{ screen:Page2, navigationOptions:{ tabBarLabel: 'page2', tabBarIcon: (({tintColor, focused}) => ( <Ionicons name={focused?'ios-people':'ios-people-outline'} size={26} style={{color:tintColor}} /> )) } }, Page3:{ screen:Page3, navigationOptions:{ tabBarLabel: 'page3', tabBarIcon: (({tintColor, focused}) => ( <Ionicons name={focused?'ios-clock':'ios-clock-outline'} size={26} style={{color:tintColor}} /> )) } } },{ tabBarPosition:'bottom',//位置 tabBarOptions: { showIcon: true,//是否显示图标!!!!!!! style: { height: 45,//底部导航的宽度 backgroundColor: '#211305',//底部导航的颜色 }, labelStyle: { fontSize: 12,//字体大小 marginTop:-2,//字体距离图标大小 }, } }); export const AppStackNavigator=createStackNavigator({ //顶部导航 Home:{ screen:Home }, TabNav:{ screen:AppTabNavigators, navigationOptions:{ title:"This is TabNav" } }, } );
4:HomePage页
import React, { Component } from 'react'; import { StyleSheet, Text, View, Button, } from 'react-native'; type Props = {}; export default class App extends Component<Props> { static navigationOptions = { title: '主页', }; render() { const {navigation} =this.props; return ( <View style={styles.container}> <Button title="跳过主页" onPress={()=>navigation.navigate('TabNav')} /> </View> ); } } const styles = StyleSheet.create({ container: { flex: 1, justifyContent: 'center', alignItems: 'center', backgroundColor: '#e5fffd', } });
5:page1,page2,page3页(展示一页)
import React, { Component } from 'react'; import { StyleSheet, Text, View, Button, } from 'react-native'; type Props = {}; export default class Page1 extends Component<Props> { render() { const {navigation}=this.props; return ( <View style={styles.container}> <Text>欢迎来到page1</Text> </View> ); } } const styles = StyleSheet.create({ container: { flex: 1, justifyContent: 'center', alignItems: 'center', backgroundColor: '#ffffaa', } });
效果:
1:打开之后显示
2:点击跳过主页
3:点击标题上的(<-)返回主页
注意:(如何加载小图标)
地址:https://github.com/oblador/react-native-vector-icons
查看图名称:https://ionicframework.com/docs/ionicons/
如何使用:
1: npm install react-native-vector-icons --save
2:react-native link
3:具体见路由页