导航库React Navigation
功能：1.跳转页面
2.底部导航栏
3.顶部导航栏
4.身份认证
一、createStackNavigator
1)配置多个页面
1)在你的 React Native 项目中安装react-navigation这个包
yarn add react-navigation
2)导入依赖创建路由
import { createStackNavigator } from 'react-navigation';
3)创建
const RootStack = createStackNavigator(
{
Home: HomeScreen,
Details: DetailsScreen,
},
{
initialRouteName: 'Home',
}
);
注：由于createStackNavigator函数会返回一个React组件
2)页面切换
<Button
title="跳转详情页面"
onPress={() => this.props.navigation.navigate("Details")}
/>
<Button
title="跳转自己本身Home页面：navigate"
onPress={() => this.props.navigation.navigate("Home")}
/>
<Button
title="跳转自己本身Home页面：push"
onPress={() => this.props.navigation.push("Home")}
/>
<Button
title="返回按钮"
onPress={() => this.props.navigation.goBack()}
/>
3)页面传值:
传值数据A：
<Button
title="跳转详情页面,实现传递参数"
onPress={() =>
this.props.navigation.navigate("Details", { name: "张三", age: 20 })
}
/>
接收数据B：
this.props.navigation.getParam("name", "admin")
4)配置标签栏
//设置默认标题
static navigationOptions = {
title: "Home"
};
//设置参数作为标题
static navigationOptions = ({ navigation }) => {
return {
title: navigation.getParam("name", "Details")
};
};
//单个页面更改样式
{
title: "Home",
headerStyle: {
backgroundColor: "#f4511e"
},
headerTintColor: "#605",
headerTitleStyle: {
fontWeight: "bold"
}
};
//在路由表中配置样式，实现多个页面共享样式
const Route = createStackNavigator(
{
Home: {
screen: Home
},
Details: Details
},
{
initialRouteName: "Home",
//跨页面共享标题栏设置
navigationOptions: {
headerStyle: {
backgroundColor: "#f4511e"
},
headerTintColor: "#fff",
headerTitleStyle: {
fontWeight: "bold"
}
}
}
);
二、顶部导航栏
1.案例使用：
import { createTabNavigator } from "react-navigation";
import JHSreeen from "./JHSreeen";
import FXSreeen from "./FXSreeen";
const TieScreen = createTabNavigator(
{
JH: {
screen: JHSreeen,
navigationOptions: {
title: "精华"
}
},
FX: {
screen: FXSreeen,
navigationOptions: {
title: "分享"
}
}
}
);
2.顶部导航栏设置属性：
{
//设置标题栏通配效果
navigationOptions: {
title: "标题"
},
//设置文本选中前后效果颜色
tabBarOptions: {
activeTintColor: "white", //激活样式
inactiveTintColor: "gray" //未激活样式
},
tabBarPosition: "top", //设置显示位置
swipeEnabled: true, //是否可以滑动
animationEnabled: true //滑动效果
}
三、底部导航栏
1.案例使用：
import { createBottomTabNavigator } from "react-navigation";
import Ionicons from "react-native-vector-icons/Ionicons";
const Home = createBottomTabNavigator(
{
Topic: {
screen: Topic,
navigationOptions: {
title: "帖子"
}
},
Publish: {
screen: Publish,
navigationOptions: {
title: "发布"
}
},
My: {
screen: My,
navigationOptions: {
title: "我的"
}
}
}
);
2.底部导航栏设置属性：
导入三方图片库：yarn add react-native-vector-icons
引入关联：react-native link
导入依赖：
import Ionicons from "react-native-vector-icons/Ionicons";
import React, { Component } from "react";
Android项目中做编译，运行(更新、更新、更改implementation)
{
//配置底部导航图片
navigationOptions: ({ navigation }) => ({
tabBarIcon: ({ focused, tintColor }) => {
const { routeName } = navigation.state;
let iconName;
if (routeName === "Tab1") {
iconName = "ios-document";
} else if (routeName === "Tab2") {
iconName = "ios-create";
}
return <Ionicons name={iconName} size={25} color={tintColor} />;
}
})
}
3.底部导航栏加载本地图片
{
backBehavior: "none",
tabBarOptions: {
activeTintColor: "#5599ff",
style: { backgroundColor: "#f8f8f8" },
indicatorStyle: { opacity: 0 },
tabStyle: { padding: 0 },
labelStyle: { fontSize: 12 }
},
navigationOptions: ({ navigation }) => ({
tabBarIcon: ({ focused, tintColor }) => {
const { routeName } = navigation.state;
if (routeName === "首页") {
if (focused) {
return (
<Image
source={require("../Images/TabBar/tabBar_home_click_icon.png")}
/>
);
} else {
return (
<Image
source={require("../Images/TabBar/tabBar_home_icon.png")}
/>
);
}
} else if (routeName === "消息") {
if (focused) {
return (
<Image
source={require("../Images/TabBar/tabBar_casehistory_click_icon.png")}
/>
);
} else {
return (
<Image
source={require("../Images/TabBar/tabBar_casehistory_icon.png")}
/>
);
}
} else if (routeName === "我的") {
if (focused) {
return (
<Image
source={require("../Images/TabBar/tabBar_educat_click_icon.png")}
/>
);
} else {
return (
<Image
source={require("../Images/TabBar/tabBar_educat_icon.png")}
/>
);
}
}
}
})
}
四、身份认证
Route.js 路由页面
import { createSwitchNavigator } from "react-navigation";
import Auth from "./Auth";
import Home from "./Home";
import Login from "./Login";
const Route = createSwitchNavigator(
{
Auth: Auth,
Home: Home,
Login: Login
},
{
initialRouteName: "Auth"
}
);
Auth.,js 认证页面（状态判断）
//判断登录认证状态：true:Home false：Login
_bootstrapAsync = async () => {
//获取Sp文件中保存的用户信息，用户判断用户登录的状态
const name = await AsyncStorage.getItem("name");
if (name && name.length >= 6) {
this.props.navigation.navigate("Home");
} else {
this.props.navigation.navigate("Login");
}
// const userToken = await AsyncStorage.getItem("userToken");
// this.props.navigation.navigate(userToken ? "App" : "Auth");
};
Login.js 登录页面（用户登录）
_signInAsync = async () => {
//保存登录信息到SP文件
await AsyncStorage.setItem("name", "abc123456");
//登录后跳转到主页面
this.props.navigation.navigate("Home");
};
Home.js 主页面 （注销功能）
_signOutAsync = async () => {
//将Sp文件中保存的用户信息清空
await AsyncStorage.clear();
//跳转到登录页面
this.props.navigation.navigate("Login");
};
