react-navigation使用步驟詳解
這次帶給大家react-navigation使用步驟詳解,react-navigation使用的注意事項有哪些,以下就是實戰案例,一起來看一下。
一、主要構成
依使用形式主要分為三個部分:
StackNavigator:類似普通的Navigator,螢幕上方導覽列
TabNavigator: 相當於ios裡面的TabBarController,畫面下方的標籤列
DrawerNavigator:抽屜效果,側邊滑出
二、使用
1.新項目
react-native init ComponentDemo
2. 在應用程式中安裝此函式庫
npm install --save react-navigation
安裝完發現是beta版本(v1.0.0-beta.7) ,竟然有坑?!一會兒我們會詳細說這個坑~
3.測試TabNavigator、StackNavigator和DrawerNavigator
(1)新建HomePage.js
import React from 'react'; import { StyleSheet, View, Text, Button, Image } from 'react-native'; import { StackNavigator, TabNavigator } from 'react-navigation'; import ChatScreen from './ChatScreen'; import MinePage from './MinePage'; class HomePage extends React.Component{ static navigationOptions={ title: '首页',//设置标题内容 header:{ backTitle: ' ',//返回按钮标题内容(默认为上一级标题内容) } } constructor(props) { super(props); } render() { const {navigate} = this.props.navigation; return ( <View style={styles.container}> <Text style={{padding:10}}>Hello, Navigation!</Text> <Button onPress={() => navigate('Chat',{user:'Sybil'})} title="点击跳转"/> </View> ) } } const MainScreenNavigator = TabNavigator({ Home: { screen: HomePage, navigationOptions: { tabBar: { label: '首页', icon: ({tintColor}) => ( <Image source={require('./image/bar_home_nomarl@3x.png')} style={[{tintColor: tintColor},styles.icon]} /> ), }, } }, Certificate: { screen: MinePage, navigationOptions: { tabBar: { label: '我的', icon: ({tintColor}) => ( <Image source={require('./image/bar_center_normal@3x.png')} style={[{tintColor: tintColor},styles.icon]} /> ), }, } }, }, { animationEnabled: false, // 切换页面时不显示动画 tabBarPosition: 'bottom', // 显示在底端,android 默认是显示在页面顶端的 swipeEnabled: false, // 禁止左右滑动 backBehavior: 'none', // 按 back 键是否跳转到第一个 Tab, none 为不跳转 tabBarOptions: { activeTintColor: '#008AC9', // 文字和图片选中颜色 inactiveTintColor: '#999', // 文字和图片默认颜色 showIcon: true, // android 默认不显示 icon, 需要设置为 true 才会显示 indicatorStyle: {height: 0}, // android 中TabBar下面会显示一条线,高度设为 0 后就不显示线了 style: { backgroundColor: '#fff', // TabBar 背景色 }, labelStyle: { fontSize: 12, // 文字大小 }, }, }); const styles = StyleSheet.create({ container:{ flex: 1, backgroundColor:'#fff' }, icon: { height: 22, width: 22, resizeMode: 'contain' } }); const SimpleApp = StackNavigator({ Home: {screen: MainScreenNavigator}, Chat:{screen:ChatScreen}, }); export default SimpleApp;
(2)新建ChatScreen.js
import React from 'react'; import { Button, Image, View, Text } from 'react-native'; class ChatScreen extends React.Component { static navigationOptions = { title:'聊天', }; render() { const {params} = this.props.navigation.state; return ( <View style={{backgroundColor:'#fff',flex:1}}> <Text style={{padding:20}}>Chat with {params.user}</Text> </View> ); } } export default ChatScreen;
(3)新建MinePage.js
import React,{Component} from 'react'; import { Button, Image, View, Text, StyleSheet } from 'react-native'; import { DrawerNavigator } from 'react-navigation'; import MyNotificationsScreen from './MyNotificationsScreen'; class MinePage extends Component{ static navigationOptions = { title:'我的', drawerLabel: '我的', // Note: By default the icon is only shown on iOS. Search the showIcon option below. drawerIcon: ({ tintColor }) => ( <Image source={require('./image/chat@3x.png')} style={[styles.icon, {tintColor: tintColor}]} /> ), }; render(){; return( <View style={{backgroundColor:'#fff',flex:1}}> <Text style={{padding:20}}>Sybil</Text> <Button style={{padding:20}} onPress={() => this.props.navigation.navigate('DrawerOpen')} title="点击打开侧滑菜单" /> </View> ); } } const styles = StyleSheet.create({ icon: { width: 24, height: 24, }, }); const MyChatNavigator = DrawerNavigator({ MyChat: { screen: MinePage, }, Notifications: { screen: MyNotificationsScreen, }, },{ drawerWidth: 220, // 抽屉宽 drawerPosition: 'left', // 抽屉在左边还是右边 // contentComponent: CustomDrawerContentComponent, // 自定义抽屉组件 contentOptions: { initialRouteName: MinePage, // 默认页面组件 activeTintColor: '#008AC9', // 选中文字颜色 activeBackgroundColor: '#f5f5f5', // 选中背景颜色 inactiveTintColor: '#000', // 未选中文字颜色 inactiveBackgroundColor: '#fff', // 未选中背景颜色 style: { // 样式 } } }); export default MyChatNavigator;
(4)寫MyNotificationsScreen.js
import React from 'react'; import { StyleSheet, View, Text, Button, Image } from 'react-native'; class MyNotificationsScreen extends React.Component { static navigationOptions = { title:'通知', drawerLabel: '通知', drawerIcon: ({ tintColor }) => ( <Image source={require('./image/notif@3x.png')} style={[styles.tabIcon, {tintColor: tintColor}]} /> ), }; render() { return ( <View style={{backgroundColor:'#fff'}}> <Button style={{padding:20}} onPress={() => this.props.navigation.navigate('DrawerOpen')} title="点击打开侧滑菜单" /> <Button onPress={() => this.props.navigation.goBack()} title="返回我的界面" /> </View> ); } } const styles = StyleSheet.create({ tabIcon: { width: 24, height: 24, }, }); export default MyNotificationsScreen;
(5)運行
#錯誤?這就是上面我們所說的坑~
什麼原因呢?原來是測試版的bug,在目錄中找到node_modules/react-navigation/src/views/Header.js的第12行,刪除它就OK了~
Ps:遺憾的是這個錯誤我沒有留圖啊~在我即將發表這篇文章的時候,最新版已經變成(v1.0.0-beta.9)了,最新版已經將上述的bug修改了!
好了,再次運行~
上一個動態效果圖:
#相信看了本文案例你已經掌握了方法,更多精彩請關注php中文網其它相關文章!
推薦閱讀:
以上是react-navigation使用步驟詳解的詳細內容。更多資訊請關注PHP中文網其他相關文章!

熱AI工具

Undresser.AI Undress
人工智慧驅動的應用程序,用於創建逼真的裸體照片

AI Clothes Remover
用於從照片中去除衣服的線上人工智慧工具。

Undress AI Tool
免費脫衣圖片

Clothoff.io
AI脫衣器

Video Face Swap
使用我們完全免費的人工智慧換臉工具,輕鬆在任何影片中換臉!

熱門文章

熱工具

記事本++7.3.1
好用且免費的程式碼編輯器

SublimeText3漢化版
中文版,非常好用

禪工作室 13.0.1
強大的PHP整合開發環境

Dreamweaver CS6
視覺化網頁開發工具

SublimeText3 Mac版
神級程式碼編輯軟體(SublimeText3)

CrystalDiskMark是一款適用於硬碟的小型HDD基準測試工具,可快速測量順序和隨機讀取/寫入速度。接下來就讓小編為大家介紹一下CrystalDiskMark,以及crystaldiskmark如何使用吧~一、CrystalDiskMark介紹CrystalDiskMark是一款廣泛使用的磁碟效能測試工具,用於評估機械硬碟和固態硬碟(SSD)的讀取和寫入速度和隨機I/O性能。它是一款免費的Windows應用程序,並提供用戶友好的介面和各種測試模式來評估硬碟效能的不同方面,並被廣泛用於硬體評

foobar2000是一款能隨時收聽音樂資源的軟體,各種音樂無損音質帶給你,增強版本的音樂播放器,讓你得到更全更舒適的音樂體驗,它的設計理念是將電腦端的高級音頻播放器移植到手機上,提供更便捷高效的音樂播放體驗,介面設計簡潔明了易於使用它採用了極簡的設計風格,沒有過多的裝飾和繁瑣的操作能夠快速上手,同時還支持多種皮膚和主題,根據自己的喜好進行個性化設置,打造專屬的音樂播放器支援多種音訊格式的播放,它還支援音訊增益功能根據自己的聽力情況調整音量大小,避免過大的音量對聽力造成損害。接下來就讓小編為大

MetaMask(中文也叫小狐狸錢包)是一款免費的、廣受好評的加密錢包軟體。目前,BTCC已支援綁定MetaMask錢包,綁定後可使用MetaMask錢包進行快速登錄,儲值、買幣等,且首次綁定還可獲得20USDT體驗金。在BTCCMetaMask錢包教學中,我們將詳細介紹如何註冊和使用MetaMask,以及如何在BTCC綁定並使用小狐狸錢包。 MetaMask錢包是什麼? MetaMask小狐狸錢包擁有超過3,000萬用戶,是當今最受歡迎的加密貨幣錢包之一。它可免費使用,可作為擴充功能安裝在網絡

網易郵箱,作為中國網友廣泛使用的一種電子郵箱,一直以來以其穩定、高效的服務贏得了用戶的信賴。而網易信箱大師,則是專為手機使用者打造的信箱軟體,它大大簡化了郵件的收發流程,讓我們的郵件處理變得更加便利。那麼網易信箱大師該如何使用,具體又有哪些功能呢,下文中本站小編將為大家帶來詳細的內容介紹,希望能幫助到大家!首先,您可以在手機應用程式商店搜尋並下載網易信箱大師應用程式。在應用寶或百度手機助手中搜尋“網易郵箱大師”,然後按照提示進行安裝即可。下載安裝完成後,我們打開網易郵箱帳號並進行登錄,登入介面如下圖所示

在如今雲端儲存已成為我們日常生活和工作中不可或缺的一部分。百度網盤作為國內領先的雲端儲存服務之一,憑藉其強大的儲存功能、高效的傳輸速度以及便捷的操作體驗,贏得了廣大用戶的青睞。而且無論你是想要備份重要文件、分享資料,還是在線上觀看影片、聽取音樂,百度網盤都能滿足你的需求。但很多用戶可能對百度網盤app的具體使用方法還不了解,那麼這篇教學就將為大家詳細介紹百度網盤app如何使用,還有疑惑的用戶們就快來跟著本文詳細了解一下吧!百度雲網盤怎麼用:一、安裝首先,下載並安裝百度雲軟體時,請選擇自訂安裝選

Windows作業系統是全球最受歡迎的作業系統之一,其新版本Win11備受矚目。在Win11系統中,管理員權限的取得是一個重要的操作,管理員權限可以讓使用者對系統進行更多的操作和設定。本文將詳細介紹在Win11系統中如何取得管理員權限,以及如何有效地管理權限。在Win11系統中,管理員權限分為本機管理員和網域管理員兩種。本機管理員是指具有對本機電腦的完全管理權限

Apple在周二推出了iOS17.4更新,為iPhone帶來了一系列新功能和修復。這次更新包含了全新的表情符號,同時歐盟用戶也能夠下載其他應用程式商店。此外,更新還加強了對iPhone安全性的控制,引入了更多的「失竊設備保護」設定選項,為用戶提供更多選擇和保障。 "iOS17.3首次引入了「失竊設備保護」功能,為用戶的敏感資料增加了額外的安全保障。當用戶不在家等熟悉地點時,該功能要求用戶首次輸入生物特徵信息,並在一小時後再次輸入資訊才能存取和更改某些數據,如修改AppleID密碼或關閉失竊設備保護功能

隨著網路科技的快速發展,我們的生活也得到了極大的便利,其中之一就是能夠透過網路下載和分享各種資源。而在下載資源的過程中,磁力連結成為了一種非常常見且方便的下載方式。那麼,迅雷磁力連結又是如何使用的呢?下面,我將給大家詳細介紹一下。迅雷是一款非常受歡迎的下載工具,它支援多種下載方式,其中包括磁力連結。磁力連結可以理解為一種下載位址,透過它我們可以取得資源的相關
