參考筆記

導(dǎo)航庫(kù)React Navigation

? ? 功能：1.跳轉(zhuǎn)頁(yè)面

? ? ? ? ? 2.底部導(dǎo)航欄

? ? ? ? ? 3.頂部導(dǎo)航欄

? ? ? ? ? 4.身份認(rèn)證

一、createStackNavigator

? ? 1)配置多個(gè)頁(yè)面

? ? ? ? 1)在你的 React Native 項(xiàng)目中安裝react-navigation這個(gè)包

? ? ? ? ? ? yarn add react-navigation

? ? ? ? 2)導(dǎo)入依賴創(chuàng)建路由

? ? ? ? ? ? import { createStackNavigator } from 'react-navigation';

? ? ? ? 3)創(chuàng)建

? ? ? ? ? const RootStack = createStackNavigator(

? ? ? ? ? ? {

? ? ? ? ? ? ? Home: HomeScreen,

? ? ? ? ? ? ? Details: DetailsScreen,

? ? ? ? ? ? },

? ? ? ? ? ? {

? ? ? ? ? ? ? initialRouteName: 'Home',

? ? ? ? ? ? }

? ? ? ? ? );

? ? ? ? ? 注：由于createStackNavigator函數(shù)會(huì)返回一個(gè)React組件

? ? 2)頁(yè)面切換

? ? ? ? <Button

? ? ? ? ? title="跳轉(zhuǎn)詳情頁(yè)面"

? ? ? ? ? onPress={() => this.props.navigation.navigate("Details")}

? ? ? ? />

? ? ? ? <Button

? ? ? ? ? title="跳轉(zhuǎn)自己本身Home頁(yè)面：navigate"

? ? ? ? ? onPress={() => this.props.navigation.navigate("Home")}

? ? ? ? />

? ? ? ? <Button

? ? ? ? ? title="跳轉(zhuǎn)自己本身Home頁(yè)面：push"

? ? ? ? ? onPress={() => this.props.navigation.push("Home")}

? ? ? ? />

? ? ? ? <Button

? ? ? ? ? title="返回按鈕"

? ? ? ? ? onPress={() => this.props.navigation.goBack()}

? ? ? ? />

? ? 3)頁(yè)面?zhèn)髦?

? ? ? ? 傳值數(shù)據(jù)A：

? ? ? ? ? ? <Button

? ? ? ? ? ? ? title="跳轉(zhuǎn)詳情頁(yè)面,實(shí)現(xiàn)傳遞參數(shù)"

? ? ? ? ? ? ? onPress={() =>

? ? ? ? ? ? ? ? this.props.navigation.navigate("Details", { name: "張三", age: 20 })

? ? ? ? ? ? ? }

? ? ? ? ? ? />

? ? ? ? 接收數(shù)據(jù)B：

? ? ? ? ? ? this.props.navigation.getParam("name", "admin")

? ? 4)配置標(biāo)簽欄

? ? ? //設(shè)置默認(rèn)標(biāo)題

? static navigationOptions = {

? title: "Home"

? };

? ? ? //設(shè)置參數(shù)作為標(biāo)題

? ? ? static navigationOptions = ({ navigation }) => {

? ? ? ? return {

? ? ? ? ? title: navigation.getParam("name", "Details")

? ? ? ? };

? ? ? };

? ? ? //單個(gè)頁(yè)面更改樣式

? ? ? {

? ? ? ? title: "Home",

? ? ? ? headerStyle: {

? ? ? ? ? backgroundColor: "#f4511e"

? ? ? ? },

? ? ? ? headerTintColor: "#605",

? ? ? ? headerTitleStyle: {

? ? ? ? ? fontWeight: "bold"

? ? ? ? }

? ? ? };

? ? ? //在路由表中配置樣式必指，實(shí)現(xiàn)多個(gè)頁(yè)面共享樣式

? ? ? const Route = createStackNavigator(

? ? ? ? {

? ? ? ? ? Home: {

? ? ? ? ? ? screen: Home

? ? ? ? ? },

? ? ? ? ? Details: Details

? ? ? ? },

? ? ? ? {

? ? ? ? ? initialRouteName: "Home",

? ? ? ? ? //跨頁(yè)面共享標(biāo)題欄設(shè)置

? ? ? ? ? navigationOptions: {

? ? ? ? ? ? headerStyle: {

? ? ? ? ? ? ? backgroundColor: "#f4511e"

? ? ? ? ? ? },

? ? ? ? ? ? headerTintColor: "#fff",

? ? ? ? ? ? headerTitleStyle: {

? ? ? ? ? ? ? fontWeight: "bold"

? ? ? ? ? ? }

? ? ? ? ? }

? ? ? ? }

? ? ? );

二棋嘲、頂部導(dǎo)航欄

? ? ? 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.頂部導(dǎo)航欄設(shè)置屬性：

? ? ? ? {

? ? ? ? ? //設(shè)置標(biāo)題欄通配效果

? ? ? ? ? navigationOptions: {

? ? ? ? ? ? title: "標(biāo)題"

? ? ? ? ? },

? ? ? ? ? //設(shè)置文本選中前后效果顏色

? ? ? ? ? tabBarOptions: {

? ? ? ? ? ? activeTintColor: "white", //激活樣式

? ? ? ? ? ? inactiveTintColor: "gray" //未激活樣式

? ? ? ? ? },

? ? ? ? ? tabBarPosition: "top", //設(shè)置顯示位置

? ? ? ? ? swipeEnabled: true, //是否可以滑動(dòng)

? ? ? ? ? animationEnabled: true //滑動(dòng)效果

? ? ? ? }

三鼓蜒、底部導(dǎo)航欄

? ? ? 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: "發(fā)布"

? ? ? ? ? ? ? ? }

? ? ? ? ? ? ? },

? ? ? ? ? ? ? My: {

? ? ? ? ? ? ? ? screen: My,

? ? ? ? ? ? ? ? navigationOptions: {

? ? ? ? ? ? ? ? ? title: "我的"

? ? ? ? ? ? ? ? }

? ? ? ? ? ? ? }

? ? ? ? ? ? }

? ? ? ? ? );

? ? ? ? 2.底部導(dǎo)航欄設(shè)置屬性：

? ? ? ? ? ? 導(dǎo)入三方圖片庫(kù)：yarn add react-native-vector-icons

? ? ? ? ? ? 引入關(guān)聯(lián)：react-native link

? ? ? ? ? ? 導(dǎo)入依賴：

? ? ? ? ? ? ? ? import Ionicons from "react-native-vector-icons/Ionicons";

? ? ? ? ? ? ? ? import React, { Component } from "react";

? ? ? ? ? ? Android項(xiàng)目中做編譯桩盲，運(yùn)行(更新曲饱、更新趴拧、更改implementation)

? ? ? ? ? ? {

? ? ? ? ? ? ? ? //配置底部導(dǎo)航圖片

? ? ? ? ? ? ? ? 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.底部導(dǎo)航欄加載本地圖片

? ? ? ? ? ? {

? ? ? ? ? ? ? ? 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 === "首頁(yè)") {

? ? ? ? ? ? ? ? ? ? ? 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")}

? ? ? ? ? ? ? ? ? ? ? ? ? />

? ? ? ? ? ? ? ? ? ? ? ? );

? ? ? ? ? ? ? ? ? ? ? }

? ? ? ? ? ? ? ? ? ? }

? ? ? ? ? ? ? ? ? }

? ? ? ? ? ? ? ? })

? ? ? ? ? ? }

四、身份認(rèn)證

? ? ? Route.js? 路由頁(yè)面

? ? ? ? ? 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 認(rèn)證頁(yè)面（狀態(tài)判斷）

? ? ? ? //判斷登錄認(rèn)證狀態(tài)：true:Home? false：Login

? ? ? ? _bootstrapAsync = async () => {

? ? ? ? ? //獲取Sp文件中保存的用戶信息懈费，用戶判斷用戶登錄的狀態(tài)

? ? ? ? ? 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? 登錄頁(yè)面（用戶登錄）

? ? ? ? _signInAsync = async () => {

? ? ? ? ? //保存登錄信息到SP文件

? ? ? ? ? await AsyncStorage.setItem("name", "abc123456");

? ? ? ? ? //登錄后跳轉(zhuǎn)到主頁(yè)面

? ? ? ? ? this.props.navigation.navigate("Home");

? ? ? ? };

? ? ? Home.js? 主頁(yè)面（注銷功能）

? ? ? ? _signOutAsync = async () => {

? ? ? ? ? //將Sp文件中保存的用戶信息清空

? ? ? ? ? await AsyncStorage.clear();

? ? ? ? ? //跳轉(zhuǎn)到登錄頁(yè)面

? ? ? ? ? this.props.navigation.navigate("Login");

? ? ? ? };

?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請(qǐng)聯(lián)系作者

人面猴
序言：七十年代末计露，一起剝皮案震驚了整個(gè)濱河市，隨后出現(xiàn)的幾起案子憎乙，更是在濱河造成了極大的恐慌票罐，老刑警劉巖，帶你破解...
沈念sama閱讀 217,542評(píng)論 6贊 504
死咒
序言：濱河連續(xù)發(fā)生了三起死亡事件泞边，死亡現(xiàn)場(chǎng)離奇詭異该押，居然都是意外死亡，警方通過查閱死者的電腦和手機(jī)阵谚，發(fā)現(xiàn)死者居然都...
沈念sama閱讀 92,822評(píng)論 3贊 394
救了他兩次的神仙讓他今天三更去死
文/潘曉璐我一進(jìn)店門蚕礼，熙熙樓的掌柜王于貴愁眉苦臉地迎上來，“玉大人梢什，你說我怎么就攤上這事奠蹬。” “怎么了嗡午？”我有些...
開封第一講書人閱讀 163,912評(píng)論 0贊 354
道士緝兇錄：失蹤的賣姜人
文/不壞的土叔我叫張陵罩润，是天一觀的道長(zhǎng)。經(jīng)常有香客問我翼馆，道長(zhǎng)割以，這世上最難降的妖魔是什么？我笑而不...
開封第一講書人閱讀 58,449評(píng)論 1贊 293
?港島之戀（遺憾婚禮）
正文為了忘掉前任应媚，我火速辦了婚禮严沥，結(jié)果婚禮上，老公的妹妹穿的比我還像新娘中姜。我一直安慰自己消玄，他們只是感情好，可當(dāng)我...
茶點(diǎn)故事閱讀 67,500評(píng)論 6贊 392
惡毒庶女頂嫁案：這布局不是一般人想出來的
文/花漫我一把揭開白布丢胚。她就那樣靜靜地躺著翩瓜，像睡著了一般。火紅的嫁衣襯著肌膚如雪携龟。梳的紋絲不亂的頭發(fā)上兔跌，一...
開封第一講書人閱讀 51,370評(píng)論 1贊 302
城市分裂傳說
那天，我揣著相機(jī)與錄音峡蟋，去河邊找鬼坟桅。笑死华望，一個(gè)胖子當(dāng)著我的面吹牛，可吹牛的內(nèi)容都是我干的仅乓。我是一名探鬼主播赖舟，決...
沈念sama閱讀 40,193評(píng)論 3贊 418
雙鴛鴦連環(huán)套：你想象不到人心有多黑
文/蒼蘭香墨我猛地睜開眼，長(zhǎng)吁一口氣：“原來是場(chǎng)噩夢(mèng)啊……” “哼夸楣！你這毒婦竟也來了宾抓？” 一聲冷哼從身側(cè)響起，我...
開封第一講書人閱讀 39,074評(píng)論 0贊 276
萬(wàn)榮殺人案實(shí)錄
序言：老撾萬(wàn)榮一對(duì)情侶失蹤豫喧，失蹤者是張志新（化名）和其女友劉穎洞慎，沒想到半個(gè)月后，有當(dāng)?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體嘿棘，經(jīng)...
沈念sama閱讀 45,505評(píng)論 1贊 314
?護(hù)林員之死
正文獨(dú)居荒郊野嶺守林人離奇死亡，尸身上長(zhǎng)有42處帶血的膿包…… 初始之章·張勛以下內(nèi)容為張勛視角年9月15日...
茶點(diǎn)故事閱讀 37,722評(píng)論 3贊 335
?白月光啟示錄
正文我和宋清朗相戀三年旭绒，在試婚紗的時(shí)候發(fā)現(xiàn)自己被綠了鸟妙。大學(xué)時(shí)的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片。...
茶點(diǎn)故事閱讀 39,841評(píng)論 1贊 348
活死人
序言：一個(gè)原本活蹦亂跳的男人離奇死亡挥吵，死狀恐怖重父，靈堂內(nèi)的尸體忽然破棺而出，到底是詐尸還是另有隱情忽匈，我是刑警寧澤房午，帶...
沈念sama閱讀 35,569評(píng)論 5贊 345
?日本核電站爆炸內(nèi)幕
正文年R本政府宣布，位于F島的核電站丹允，受9級(jí)特大地震影響郭厌，放射性物質(zhì)發(fā)生泄漏。R本人自食惡果不足惜雕蔽，卻給世界環(huán)境...
茶點(diǎn)故事閱讀 41,168評(píng)論 3贊 328
男人毒藥：我在死后第九天來索命
文/蒙蒙一折柠、第九天我趴在偏房一處隱蔽的房頂上張望。院中可真熱鬧批狐，春花似錦扇售、人聲如沸。這莊子的主人今日做“春日...
開封第一講書人閱讀 31,783評(píng)論 0贊 22
一樁弒父案承冰，背后竟有這般陰謀
文/蒼蘭香墨我抬頭看了看天上的太陽(yáng)。三九已至食零，卻和暖如春困乒，著一層夾襖步出監(jiān)牢的瞬間，已是汗流浹背贰谣。一陣腳步聲響...
開封第一講書人閱讀 32,918評(píng)論 1贊 269
情欲美人皮
我被黑心中介騙來泰國(guó)打工顶燕，沒想到剛下飛機(jī)就差點(diǎn)兒被人妖公主榨干…… 1. 我叫王不留凑保，地道東北人。一個(gè)月前我還...
沈念sama閱讀 47,962評(píng)論 2贊 370
代替公主和親
正文我出身青樓涌攻，卻偏偏與公主長(zhǎng)得像欧引，于是被迫代替她去往敵國(guó)和親。傳聞我的和親對(duì)象是個(gè)殘疾皇子恳谎，可洞房花燭夜當(dāng)晚...
茶點(diǎn)故事閱讀 44,781評(píng)論 2贊 354

參考筆記

推薦閱讀更多精彩內(nèi)容