資訊專欄INFORMATION COLUMN
摘要：在上，掛鉤到硬件的返回按鈕，并在用戶按下返回按鈕時觸發(fā)方法，因此它的行為與用戶期望的相同。傳遞參數(shù)給路由有個知識點(diǎn)需要將參數(shù)包裝成一個對象，作為方法的第二個參數(shù)傳遞給路由。默認(rèn)情況下按照平臺慣例設(shè)置，所以在上標(biāo)題居中，在上左對齊。
push 和 navigate的區(qū)別
push: 每次調(diào)用 push 時, 我們會向?qū)Ш蕉褩Ｖ刑砑有侣酚伞?/p>
navigate: 當(dāng)你調(diào)用 navigate 時, 它首先嘗試查找具有該名稱的現(xiàn)有路由, 并且只有在堆棧上沒有一個新路由時才會推送該路由。
返回如果當(dāng)前頁面可以執(zhí)行返回操作，則 stack navigator 會自動提供一個包含返回按鈕的標(biāo)題欄（如果導(dǎo)航堆棧中只有一個頁面，則沒有任何可返回的內(nèi)容，因此也不存在返回鍵）。
有時候你希望能夠以編程的方式觸發(fā)此行為，可以使用 this.props.navigation.goBack() 。
在Android上，React Navigation 掛鉤到硬件的返回按鈕，并在用戶按下返回按鈕時觸發(fā) goBack()方法，因此它的行為與用戶期望的相同。
另一個常見需求是能夠跨越多個頁面返回
例如，如果你處在堆棧深處，上面有多個頁面，此時你想要將上面所有的頁面都銷毀，并返回第一個頁面。 在這種情況下，我們知道我們要回到 Home ，所以我們可以使用 navigate("Home") ，或者使用 navigation.popToTop() ，它可以返回到堆棧中的第一個頁面。
傳遞參數(shù)給路由有2個知識點(diǎn)
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ù)。 我們用于設(shè)置標(biāo)題欄的標(biāo)題的是title這個屬性。
class HomeScreen extends React.Component {
static navigationOptions = {
title: "Home",
};
/* render function, etc */
}
createStackNavigator默認(rèn)情況下按照平臺慣例設(shè)置，所以在iOS上標(biāo)題居中，在Android上左對齊。
2.調(diào)整標(biāo)題樣式
定制標(biāo)題樣式時有三個關(guān)鍵屬性：headerStyle、headerTintColor和headerTitleStyle。
headerStyle：一個應(yīng)用于 header 的最外層 View 的 樣式對象， 如果你設(shè)置 backgroundColor ，他就是header 的顏色。
headerTintColor：返回按鈕和標(biāo)題都使用這個屬性作為它們的顏色。 在下面的例子中，我們將 tint color 設(shè)置為白色（#fff），所以返回按鈕和標(biāo)題欄標(biāo)題將變?yōu)榘咨?br>headerTitleStyle：如果我們想為標(biāo)題定制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",
},
},
}
);
文章版權(quán)歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。
轉(zhuǎn)載請注明本文地址：http://systransis.cn/yun/110025.html
摘要：電影天堂客戶端重新開始具體更新以為準(zhǔn)。重新開始兩年前發(fā)布了第一個版本。最為一名偏體驗偏設(shè)計的前端開發(fā)者，對界面和用戶體驗都有極高的重視。 電影天堂React Native 客戶端 重新開始！ 具體更新以https://github.com/XboxYan/DYTT為準(zhǔn)。 重新開始 兩年前發(fā)布了第一個版本。 現(xiàn)在， 使用最新的react-native 0.57和全新的設(shè)計完成了V2.0 ...
摘要：導(dǎo)航組件使用詳解注意了，如果有小伙伴們發(fā)現(xiàn)運(yùn)行作者提供的示例項目報如下的錯誤，可能是大家使用了命令導(dǎo)致的，解決這個錯誤的辦法就是將刪除，然后重新使用命令來安裝，最后使用來起服務(wù)，應(yīng)該就不報錯了。 react-navigation導(dǎo)航組件使用詳解 注意了，如果有小伙伴們發(fā)現(xiàn)運(yùn)行作者提供的react-navigation示例項目報如下的錯誤，可能是大家使用了 yarn install 命...
摘要：的使用用戶發(fā)出函數(shù)算出新的重新渲染三大原則單一數(shù)據(jù)源，利用的形式向下傳播數(shù)據(jù)流決定只讀，通過修改通過純函數(shù)來修改組件狀態(tài)，是描述動作的純函數(shù)連接和基于全局的，選擇我們要注入的不同的組件分開把注入，讀取方法三劍客先確定一下初始狀 redux的使用 react-native, react, react-redux, react-navigaition, redux-thunk, redu...
摘要：年前公司由一個項目是使用來開發(fā)的所以遇到了一些問題比較影響開發(fā)進(jìn)程的就是路由問題了實(shí)際上就是這個組件比較難懂這里給大家講解一下希望大家少踩點(diǎn)坑另外本篇文章使用的是環(huán)境主要講解的還是如何使用記錄中路由的狀態(tài)但是會穿插一些小內(nèi)容這里雖然講到的是 年前公司由一個項目是使用 ReactNative 來開發(fā)的所以遇到了一些問題,比較影響開發(fā)進(jìn)程的就是路由問題了,實(shí)際上就是 ReactNaviga...
閱讀 783·2023-04-25 20:47
閱讀 2550·2019-08-30 15:53
閱讀 959·2019-08-26 14:05
閱讀 903·2019-08-26 11:59
閱讀 1692·2019-08-26 11:43
閱讀 1692·2019-08-26 10:57
閱讀 1366·2019-08-23 18:23
閱讀 2683·2019-08-23 12:57
