2. 程式人生 > >react-native導航欄react-navigation

react-native導航欄react-navigation

阿新 • • 發佈：2019-02-14

react-native學習交流QQ群：806870562

效果圖


使用

安裝react-navigation這個包，在終端使用如下命令（需要在專案專案中執行）：方法1：yarn add react-navigation方法2：npm install --save react-navigation使用1、配置（1）在App.js檔案中的配置匯入標頭檔案：import { createStackNavigator } from 'react-navigation';註冊並初始化路由頁面：const RootStack = createStackNavigator( { // 定義路由頁面 Home: NavigationPage,
homeNext: NavigationPageNext, Details: NavigationPageDetail, }, { // 初始化首頁 initialRouteName: 'Home', });使用路由：export default class App extends React.Component { render() { return <RootStack />; }}（2）在其他被註冊成路由的頁面中配置2、自定義樣式title：標題，不推薦使用（如果設定了這個導航欄和標籤欄的title就會變成一樣的）headerTitle：設定導航欄標題，推薦
header：可以設定一些導航的屬性，隱藏頂部導航欄設定為null headerBackTitle：設定跳轉頁面左側返回箭頭後面的文字，預設是上一個頁面的標題。可以自定義，也可以設定為null headerTruncatedBackTitle：設定當上個頁面標題不符合返回箭頭後的文字時，預設改成"返回" headerRight：設定導航條右側。可以是按鈕或者其他檢視控制元件 headerLeft：設定導航條左側。可以是按鈕或者其他檢視控制元件 headerStyle：設定導航條的樣式。背景色，寬高等 headerTitleStyle：設定導航欄文字樣式 headerBackTitleStyle：設定導航欄‘返回’文字樣式
headerTintColor：設定導航欄顏色 headerPressColorAndroid：安卓獨有的設定顏色紋理，需要安卓版本大於5.0 gesturesEnabled：是否支援滑動返回手勢，iOS預設支援，安卓預設關閉 如：export default class NavigationPage extends React.Component { // 配置導航欄 static navigationOptions = { // 導航欄標題，不推薦 title: 'Home', // 設定導航欄顏色 headerTintColor: "green", // 導航條的樣式，如背景色，寬高等 headerStyle:{ backgroundColor:"#1E90FF", }, // 導航欄文字樣式 headerTitleStyle:{ paddingLeft:20, fontSize:30 }, };}或：export default class NavigationPageNext extends React.Component { constructor(props){ super(props); _this = this; } // 配置導航欄 static navigationOptions = { // 導航欄標題，推薦使用 headerTitle: ( <Button title="homeNext" color="black" onPress={() => alert("點選民航欄標題")}> </Button> ), // 導航欄返回按鈕標題 headerBackTitle:"返回", // 導航條左側，可以是按鈕或者其他檢視控制元件 headerLeft: ( <TouchableOpacity onPress={() =>{ _this.props.navigation.goBack(); }}> <Image style={{marginLeft:20, width:30, height:30}} source={require("../../Resources/leftBack.png")} resizeMode='center'></Image> </TouchableOpacity> ), // 導航條右側。可以是按鈕或者其他檢視控制元件 headerRight: ( <Button title="Info" color="red" onPress={() => { _this.props.navigation.navigate('Details') }}/> ), };}3、轉場，頁面跳轉（1）不帶引數，且過濾歷史// navigae過濾現有導航，即如果已導航到檢視B，再導航時不會導航this.props.navigation.navigate('homeNext')（2）帶引數，且過濾歷史// navigae不過濾現有導航，即如果已導航到檢視B，再導航時繼續導航this.props.navigation.navigate('homeNext', {message:"導航過來了"})（3）不帶引數，且不過濾歷史// push過濾現有導航，即如果已導航到檢視B，再導航時不會導航this.props.navigation.push('homeNext')（4）帶引數，且不過濾歷史// push不過濾現有導航，即如果已導航到檢視B，再導航時繼續導航this.props.navigation.push('homeNext', {message:"導航過來了"})（5）返回this.props.navigation.goBack()或：this.props.navigation.pop()或（根頁面）：this.props.navigation.popToTop()4、傳值（1）進入B頁面時，A頁面傳值this.props.navigation.navigate('homeNext', {message:"導航過來了"})或：this.props.navigation.push('homeNext', {message:"導航過來了"})（2）進入B頁面後，接收並使用A頁面傳過來的值<Text>導航欄使用: {this.props.navigation.state.params.message}</Text>

相關推薦

react-native導航欄react-navigation

react-native學習交流QQ群：806870562效果圖使用安裝react-navigation這個包，在終端使用如下命令（需要在專案專案中執行）：方法1：yarn add react-navi

react-native導航器 react navigation 介紹

開發環境搭建 部署 ica sam native 找不到 組件 getting start 開發環境搭建好之後，想要進一步了解react-native，可以先從react-native官網上的電影列表案例入手： https://reactnative.cn/docs/0

react-native 導航器 react-navigation 3.x 使用

React-navigation 介紹   React Navigation 源於 React Native 社群對一個可擴充套件且易於使用的導航解決方案的需求，它完全使用 JavaScript 編寫。 安裝 在你的 React Native 專案中安裝 react-navigati

react-native react-navigation的用法 react native 導航路由元件react-navigation的使用

  一、問題背景 react-navigation是react-native官方推薦的，基於Javascript的可擴充套件且使用簡單的導航，功能強大且完備   回顧一下，react-navigation包含以下功能來幫助我們建立導航器: StackN

React Native導航器之react-navigation使用

在上一節Navigation元件，我們使用系統提供的導航元件做了一個跳轉的例子，不過其實戰能力不強，這裡推薦一個超牛逼的第三方庫：react-navigation。在講react-navigation之前，我們先看一下常用的導航元件。 導航控制元件 常見

React-Native開發十 react-navigation開發中的一些常見的坑

1 前言 都說RN開發效率高，一次學習隨處編寫。真的用RN開發了一個APP才知道，RN中坑真是太多，特別是很多坑只有在生產模式下才會出現，在平常的debug模式下，APP執行好好的，但是你一旦打正式包，就會發現各種報錯，各種崩潰，如果在Android平臺下，各種相容性，各種奇葩的問題

React-Native開發九 react-navigation之Android的打包與釋出

1前言 RN的開發中正式釋出前需要打包與簽名，然後才能上架各家應用市場。打包需要將js與圖片資原始檔打包進apk檔案中，生成index.android.bundle與index.android.bundle.meta檔案。下面介紹RN開發中打包APK的主要步驟，IOS沒研究過，不再本

React-Native開發八 react-navigation之自定義元件Counter

1 前言 我們知道RN中任何介面元素都可以看成元件，小到一個按鈕，大到一個頁面。RN開發就是不停的開發元件和使用元件，並讓他們協同工作，這樣高效率協同的執行起來，這樣就能完成一個APP的功能了 在實際的開發中，我們經常需要自定義一些滿足我們專案開發的自定義元件，類似於Android

React-Native開發七 react-navigation之AsyncStorage資料儲存

1 前言 我們都知道，在Android和IOS中分別有不同的持久化資料方式，例如Android中的檔案，資料庫，SharePrefences等。AsyncStorage是一個簡單的key-value儲存系統，是RN官方推薦的。它儲存的都是String型別的資料，是一個RN中輕量級的資

React-Native開發六 react-navigation之StackNavigator簡介

1 前言 react-navigation是RN開發中一款開源的導航元件，它的功能包括StackNavigator,TabNavigator,DrawerNavigator。react-navigation的出現替代了Navigator、 Ex-Navigation等老一代的導航元件

Building a React Native App With Complex Navigation Using React Navigation

In May 2018 my startup switched from the Ionic framework to React Native because the app we are developing needs versatile navigation. Ionic’s way of handl

React Native入門篇—react-navigation路由配置

本人學習React Native沒有看過任何教學視訊，都是按照官網一步步學習的。只研究了Android開發，所以下面的教程都是Android開發教程。 注意：未經允許不可私自轉載，違者必究 React Native官方文件：https://reactnative.cn/docs

【React Native開發】React Native控制元件之DrawerLayoutAndroid抽屜導航切換元件講解(13)

轉載請標明出處：(一)前言      【好訊息】個人網站已經上線執行,後面部落格以及技術乾貨等精彩文章會同步更新，請大家關注收藏:http://www.lcode.org       今天我們一起來看一

React-Native開發總結-react-navigation應用與實踐

最近更新時間：2017年10月29日14:03:20    做開發的同學都知道，難的不是技術本身，而是產品需求的頻繁變更和邏輯複雜度，這讓研發工程師最為苦惱。但總體上來說，積累技術經驗，善於總結和記錄技術的實踐心得，也是一件優雅和愉悅的事情。    對於開發的同學來說，RN開

react native android使用react-native-tab-navigator來做底部導航tabbar（2）一個坑：navigator

navigator是用來實現介面跳轉的，這個資料網上很多，就不多說了，但是我在TabNavigator的子頁面裡碰到一個大坑，發現無法在子頁面中獲取到navigator，用 this.props.navigator.push({name:"

react-natigation導航欄

點選更改標題 export default class ChatScreen extends Component { static navigationOptions=({navigation})=>{ const {

【React Native開發】React Native控件之ProgressBarAndroid進度條解說(12)

ice 發現 來講 top 文章 func dev all ios 轉載請標明出處：http://blog.csdn.net/developer_jiangqq/article/details/50596367本文出自:【江清清的博客】(一)前言 【好消息】

React-Native開發五 React Native 的Image元件

1 Image元件介紹 RN中Image元件主要用於載入圖片，可載入靜態圖片，網路圖片，以及原生圖片，本地檔案系統中圖片資源 官方參考https://facebook.github.io/react-native/docs/image#resizemode 2 Image元件功

React-Native開發四 React Native 的Touchable元件

1 Touchable元件簡介 Touchable元件是RN的按鈕元件，一共有四大類 TouchableWithoutFeedback：不帶任何反饋的可觸控元件 TouchableHighlight：在TouchableWithoutFeedback的基礎上添加了當按下時背景會變

React-Native開發三 React Native元件生命週期

1 前言 大家都知道React Native其實是由很多元件構成，開發RN介面的過程就是合理的組織各個元件的過程，在這其中需要不斷的拆分和優化元件。因此理解RN元件的生命週期很重要，這樣我們才能合理的在元件中進行我們的事務。 2 React Native元件生命週期 RN元件