成人无码视频,亚洲精品久久久久av无码,午夜精品久久久久久毛片,亚洲 中文字幕 日韩 无码

資訊專欄INFORMATION COLUMN

#react-navigation# 學(xué)習(xí)重點(diǎn)記錄

fyber / 1022人閱讀

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

push 和 navigate的區(qū)別

push: 每次調(diào)用 push 時(shí), 我們會(huì)向?qū)Ш蕉褩Ｖ刑砑有侣酚伞?/p>

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

返回

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

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

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

另一個(gè)常見需求是能夠跨越多個(gè)頁(yè)面返回

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

傳遞參數(shù)給路由

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

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

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

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

配置標(biāo)題欄

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

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

  /* render function, etc */
}

createStackNavigator默認(rèn)情況下按照平臺(tái)慣例設(shè)置，所以在iOS上標(biāo)題居中，在Android上左對(duì)齊。

2.調(diào)整標(biāo)題樣式
定制標(biāo)題樣式時(shí)有三個(gè)關(guān)鍵屬性：headerStyle、headerTintColor和headerTitleStyle。

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

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

  /* render function, etc */
}

3.如何在頁(yè)面之間共享navigationOptions
將配置移動(dòng)到 defaultNavigationOptions 屬性下的 stack navigator 中.

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

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

轉(zhuǎn)載請(qǐng)注明本文地址：http://m.hztianpu.com/yun/110025.html

相關(guān)文章

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

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

    MockingBird 評(píng)論0 收藏0

  • react-navigation使用詳解

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

    stonezhu 評(píng)論0 收藏0

  • react-native, react-navigation, redux 學(xué)習(xí)筆記

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

    妤鋒シ 評(píng)論0 收藏0

  • Mobx + React Native 獲取路由的狀態(tài)信息

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

    李濤 評(píng)論0 收藏0

發(fā)表評(píng)論

0條評(píng)論

閱讀需要支付1元查看
<