#react-navigation# 學習重點記錄

fyber 發(fā)布于2019-08-26 14:05 / 954人閱讀

摘要：在上，掛鉤到硬件的返回按鈕，并在用戶按下返回按鈕時觸發(fā)方法，因此它的行為與用戶期望的相同。傳遞參數(shù)給路由有個知識點需要將參數(shù)包裝成一個對象，作為方法的第二個參數(shù)傳遞給路由。默認情況下按照平臺慣例設置，所以在上標題居中，在上左對齊。

push 和 navigate的區(qū)別

push: 每次調(diào)用 push 時, 我們會向導航堆棧中添加新路由。

navigate: 當你調(diào)用 navigate 時, 它首先嘗試查找具有該名稱的現(xiàn)有路由, 并且只有在堆棧上沒有一個新路由時才會推送該路由。

如果當前頁面可以執(zhí)行返回操作，則 stack navigator 會自動提供一個包含返回按鈕的標題欄（如果導航堆棧中只有一個頁面，則沒有任何可返回的內(nèi)容，因此也不存在返回鍵）。

有時候你希望能夠以編程的方式觸發(fā)此行為，可以使用 this.props.navigation.goBack() 。

在Android上，React Navigation 掛鉤到硬件的返回按鈕，并在用戶按下返回按鈕時觸發(fā) goBack()方法，因此它的行為與用戶期望的相同。

另一個常見需求是能夠跨越多個頁面返回

例如，如果你處在堆棧深處，上面有多個頁面，此時你想要將上面所有的頁面都銷毀，并返回第一個頁面。在這種情況下，我們知道我們要回到 Home ，所以我們可以使用 navigate("Home") ，或者使用 navigation.popToTop() ，它可以返回到堆棧中的第一個頁面。

傳遞參數(shù)給路由

有2個知識點
1.需要將參數(shù)包裝成一個對象，作為navigation.navigate方法的第二個參數(shù)傳遞給路由。如：

this.props.navigation.navigate("RouteName", {paramName: "value"})

2.讀取頁面組件中的參數(shù)的方法：

-可以使用this.props.navigation.getParam讀取參數(shù)
-也可以使用 this.props.navigation.state.params作為getParam的替代方案，如果未指定參數(shù)，它的值是 null。所以使用getParam通常更容易，你不必處理這種情況

配置標題欄

1.每個頁面組件可以有一個名為navigationOptions的靜態(tài)屬性，它是一個對象或一個返回包含各種配置選項的對象的函數(shù)。我們用于設置標題欄的標題的是title這個屬性。

class HomeScreen extends React.Component {
  static navigationOptions = {
    title: "Home",
  };

  /* render function, etc */
}

createStackNavigator默認情況下按照平臺慣例設置，所以在iOS上標題居中，在Android上左對齊。

2.調(diào)整標題樣式
定制標題樣式時有三個關鍵屬性：headerStyle、headerTintColor和headerTitleStyle。

headerStyle：一個應用于 header 的最外層 View 的樣式對象，如果你設置 backgroundColor ，他就是header 的顏色。
headerTintColor：返回按鈕和標題都使用這個屬性作為它們的顏色。在下面的例子中，我們將 tint color 設置為白色（#fff），所以返回按鈕和標題欄標題將變?yōu)榘咨?br>headerTitleStyle：如果我們想為標題定制fontFamily，fontWeight和其他Text樣式屬性，我們可以用它來完成。

class HomeScreen extends React.Component {
  static navigationOptions = {
    title: "Home",
    headerStyle: {
      backgroundColor: "#f4511e",
    },
    headerTintColor: "#fff",
    headerTitleStyle: {
      fontWeight: "bold",
    },
  };

  /* render function, etc */
}

3.如何在頁面之間共享navigationOptions
將配置移動到 defaultNavigationOptions 屬性下的 stack navigator 中.

const AppNavigator = createStackNavigator(
    {
        Home: HomeScreen,
        Details: DetailsScreen
    },
    {
        initialRouteName: "Home",
        defaultNavigationOptions: {
            headerStyle: {
                backgroundColor: "#f4511e",
            },
            headerTintColor: "#fff",
            headerTitleStyle: {
                fontWeight: "bold",
            },
        },
    }
);

云服務器 GPU云服務器重點是 php重點 webrtc重點 jsp重點

文章版權歸作者所有，未經(jīng)允許請勿轉載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉載請注明本文地址：http://m.specialneedsforspecialkids.com/yun/110025.html

電影天堂React Native 客戶端V2.0發(fā)布

摘要：電影天堂客戶端重新開始具體更新以為準。重新開始兩年前發(fā)布了第一個版本。最為一名偏體驗偏設計的前端開發(fā)者，對界面和用戶體驗都有極高的重視。電影天堂React Native 客戶端重新開始！具體更新以https://github.com/XboxYan/DYTT為準。重新開始兩年前發(fā)布了第一個版本。現(xiàn)在，使用最新的react-native 0.57和全新的設計完成了V2.0 ...

MockingBird 2019-08-23 14:08 評論0 收藏0
react-navigation使用詳解

摘要：導航組件使用詳解注意了，如果有小伙伴們發(fā)現(xiàn)運行作者提供的示例項目報如下的錯誤，可能是大家使用了命令導致的，解決這個錯誤的辦法就是將刪除，然后重新使用命令來安裝，最后使用來起服務，應該就不報錯了。 react-navigation導航組件使用詳解注意了，如果有小伙伴們發(fā)現(xiàn)運行作者提供的react-navigation示例項目報如下的錯誤，可能是大家使用了 yarn install 命...

stonezhu 2019-08-23 11:47 評論0 收藏0
react-native, react-navigation, redux 學習筆記

摘要：的使用用戶發(fā)出函數(shù)算出新的重新渲染三大原則單一數(shù)據(jù)源，利用的形式向下傳播數(shù)據(jù)流決定只讀，通過修改通過純函數(shù)來修改組件狀態(tài)，是描述動作的純函數(shù)連接和基于全局的，選擇我們要注入的不同的組件分開把注入，讀取方法三劍客先確定一下初始狀 redux的使用 react-native, react, react-redux, react-navigaition, redux-thunk, redu...

妤鋒シ 2019-08-20 17:47 評論0 收藏0
Mobx + React Native 獲取路由的狀態(tài)信息

摘要：年前公司由一個項目是使用來開發(fā)的所以遇到了一些問題比較影響開發(fā)進程的就是路由問題了實際上就是這個組件比較難懂這里給大家講解一下希望大家少踩點坑另外本篇文章使用的是環(huán)境主要講解的還是如何使用記錄中路由的狀態(tài)但是會穿插一些小內(nèi)容這里雖然講到的是年前公司由一個項目是使用 ReactNative 來開發(fā)的所以遇到了一些問題,比較影響開發(fā)進程的就是路由問題了,實際上就是 ReactNaviga...

李濤 2019-08-22 14:54 評論0 收藏0