一 .react-navigation包含以下功能来帮助你创建导航器:
- StackNavigator : 一次只渲染一个页面,并提供页面之间跳转的方法。 当打开一个新的页面时,它被放置
- TabNavigator : 渲染一个选项卡,让用户可以在几个页面之间切换
- DrawerNavigator : 提供一个从屏幕左侧滑入的抽屉
二.图片与代码实现
1.StackNavigator
StackNavigator 实现如下:
(1)yarn add react-navigation
(2)代码:
import React , {Component} from 'react';
import {View , Text , Button } from 'react-native';
import {StackNavigator} from 'react-navigation';
//添加页面HomeScreen
//用一个navigator注册一个组件时,这个组件将会添加一个属性 navigation 。 这个属性能够控制不同页面间的跳转。
const HomeScreen=({navigation})=>(
<View style={{flex:1,alignItems:'center',justifyContent:'center'}}>
<Text>Home Screen</Text>
<Button onPress={()=>navigation.navigate('Details')} title="Go to Details" />
</View>
)
//添加页面DetailsScreen
const DetailsScreen=()=>(
<View style={{flex:1,alignItems:'center',justifyContent:'center'}}>
<Text>Detail Screen</Text>
</View>
)
//创建navigator
const RootNavigator=StackNavigator({
//每个key代表一个页面
Home:{
screen:HomeScreen,
//为导航栏添加标题
navigationOptions:{
headerTitle:'Home',
}
},
Details:{
screen:DetailsScreen,
navigationOptions:{
headerTitle:'Details',
},
},
});
export default RootNavigator;
2.TabNavigator
TabNavigator实现如下
(1)yarn add TabNavigator , yarn add react-native-vector-icons
(2)代码:
import React , { Component } from 'react';
import {View , Text , Button ,StyleSheet} from 'react-native'
//导入TabNavigator
import {TabNavigator} from 'react-navigation' //要先在根目录下 yarn add react-navigation
import Ionicons from 'react-native-vector-icons/Ionicons'; // 要先在根目录下 yarn add react-native-vector-icons
//创建页面HomeScreen , DetailsScreen
const HomeScreen=()=>(
<View style={{flex:1,alignItems:'center',justifyContent:'center'}} >
<Text>Home Screen</Text>
</View>
)
const DetailsScreen=()=>(
<View style={{flex:1,alignItems:'center',justifyContent:'center'}}>
<Text>Details Screen </Text>
</View>
)
//创建一个TabNavigator 名为RootTabs
const RootTabs=TabNavigator({
Home:{
screen:HomeScreen,
navigationOptions:{
tabBarLabel:'Home',
//设置一个tabBarIcon,会默认在IOS上显示,如果只在android上运行,可以忽略
tabBarIcon:({ tintColor, focused })=>(
<IonIcons
name={focused?'ios-person':'ios-persion-outline'}
size={26}
style={{color:tintColor}}
/>
),
},
},
Details:{
screen:DetailsScreen,
navigationOtions:{
tabBarLabel:'Details',
//设置一个tabBarIcon,会默认在IOS上显示,如果只在android上运行,可以忽略
tabBarIcon:({ tintColor, focused })=>(
<IonIcons
name={focused?'ios-person':'ios-persion-outline'}
size={26}
style={{color:tintColor}}
/>
),
},
},
});
export default RootTabs;
3.DrawerNavigator
DrawerNavigator实现如下
(1)yarn add TabNavigator , yarn add react-native-vector-icons
(2)代码:
import {View ,Text } from 'react-native';
//导入DrawerNavigator组件
import {DrawerNavigator} from 'react-navigation';
import Ionicons from 'react-native-vector-icons/Ionicons';
//创建页面
const HomeScreen = () =>(
<View style={{flex:1,alignItems:'center',justifyContent:'center'}}>
<Text>Home Screen</Text>
<Text>向右拉出菜单</Text>
</View>
)
const DetailsScreen = () =>(
<View style={{flex:1,alignItems:'center',justifyContent:'center'}}>
<Text>Details Screen</Text>
<Text>向右拉出菜单</Text>
</View>
)
//创建一个名为RootDrawer组件
const RootDrawer=DrawerNavigator({
Home:{
screen:HomeScreen,
//给每个DrawerItem设置一个明确的标签和图标
navigationOptions:{
drawerLabel:'Home',
drawerIcon:({tintColor,focused})=>(
<Ionicons
name={focused?'ios-person':'ios-person-outline'}
size={20}
style={{color:tintColor}}
/>
),
},
},
Details:{
screen:DetailsScreen,
navigationOptions:{
drawerLabel:'Detail',
drawerIcon:({tintColor,focused})=>(
<Ionicons
name={focused?'ios-person':'ios-person-outline'}
size={20}
style={{color:tintColor}}
/>
),
},
},
})
export default RootDrawer;
三.结语
本人RN新手小白一枚,希望结识志同道合可以互相骚扰的前端朋友,最好是女生,不然我男票要吃醋,哈哈哈哈