2-1 安裝react-navigation
yarn add react-navigation
//or
npm install react-navigation -S
2-2 安裝react-native-gesture-handler
yarn add react-native-gesture-handler
//or
npm install react-native-gesture-handler -S
因為這個插件包含native的代碼所以我們需要執行一下,下面這段代碼(讓他關聯到我們react-native項目里面):
react-native link react-native-gesture-handler
2-3 具體的演示操作
具體代碼:git@github.com:fx35792/react_native_study.git
在分支createStackNavigator
在搭建好的項目下面,我們要創建幾個文件分別是:
navigators/AppNavigators.js
Pages/Login.js
Pages/HomePage.js
pages/Page1.js
pages/Page2.js
pages/Page3.js
pages/Page4.js
pages/Page5.js
2-4 createStackNavigator
提供APP屏幕之間切換的能力,它是以棧的形式還管理屏幕之間的切換,新切換到的屏幕會放在棧的頂部。
屏幕轉場風格:
默認情況下,createStackNavigator提供了轉場過渡效果,在Android和iOS上過渡效果是不同的,這也是React Native重平臺性的一個體現,在Android上從屏幕底部淡入,在iOS上是從屏幕的右側劃入,當然你也可以通過配置讓StackNavigator支持屏幕從底部滑入的效果。
2-5 createStackNavigator API
createStackNavigator(RouteConfigs, StackNavigatorConfig):
-
RouteConfigs
(必選):路由配置對象是從路由名稱到路由配置的映射,告訴導航器該路由呈現什么。 -
StackNavigatorConfig
(可選):配置導航器的路由(如:默認首屏,navigationOptions,paths等)樣式(如,轉場模式mode、頭部模式等)。
從createStackNavigator API上可以看出createStackNavigator
支持通過RouteConfigs
和 StackNavigatorConfig
兩個參數來創建createStackNavigator導航器。
RouteConfigs
RouteConfigs支持三個參數screen
、path
以及navigationOptions
;
-
screen
(必選):指定一個 React 組件作為屏幕的主要顯示內容,當這個組件被createStackNavigator加載時,它會被分配一個navigation
prop。 -
path
(可選):用來設置支持schema跳轉時使用,具體使用會在下文的有關Schema
章節中講到; -
navigationOptions
(可選):用以配置全局的屏幕導航選項如:title、headerRight、headerLeft等;
StackNavigatorConfig
從react-navigation
源碼中可以看出StackNavigatorConfig支持配置的參數有10個。
function createStackNavigator(routeConfigMap, stackConfig = {}) {
const {
initialRouteKey,
initialRouteName,
initialRouteParams,
paths,
navigationOptions,
disableKeyboardHandling,
getCustomActionCreators
} = stackConfig;
...
這7個參數可以根據作用不同分為路由配置、視圖樣式配置兩類,首先看用于路由配置的參數:
用于路由配置的參數:
- initialRouteName: 設置默認的頁面組件,必須是上面已注冊的頁面組件。
- initialRouteParams: 初始路由的參數。
- navigationOptions: 屏幕導航的默認選項,下文會詳細講解。
- initialRouteKey - 初始路由的可選標識符。
- paths: 用來設置支持schema跳轉時使用,具體使用會在下文的有關
Schema
章節中講到。
用于導航樣式配置的參數:
- mode: 頁面切換模式: 左右是card(相當于iOS中的push效果), 上下是modal(相當于iOS中的modal效果)
- card: 普通app常用的左右切換。
- modal: 上下切換。
- headerMode: 導航欄的顯示模式: screen: 有漸變透明效果, float: 無透明效果, none: 隱藏導航欄。
- float: 無透明效果, 默認。
- screen: 有漸變透明效果, 如微信QQ的一樣。
- none: 隱藏導航欄。
- headerBackTitleVisible : 提供合理的默認值以確定后退按鈕標題是否可見,但如果要覆蓋它,則可以使用true或` false 在此選項中。
- fade-in-place: 標題組件交叉淡入淡出而不移動,類似于iOS的Twitter,Instagram和Facebook應用程序。 這是默認值。
- uikit: iOS的默認行為的近似值。 headerTransitionPreset: 指定在啟用headerMode:float時header應如何從一個屏幕轉換到另一個屏幕。
- cardStyle: 樣式(iOS上頁面切換會有白色漸變蒙層,想去掉則可以這樣設置,cardStyle: { opacity: null },切換頁面時的頁面邊框也在這里可以設置)。
- onTransitionStart: 頁面切換開始時的回調函數 (我們可以在這里注冊一些通知,告知我們切面切換的狀態,方便后面處理頁面切換事件)。
- onTransitionEnd: 頁面切換結束時的回調函數。
####### navigationOptions(屏幕導航選項)
支持一下參數:
- title: 可以作為headerTitle的備選字段(當沒設置headerTitle時會用該字段作為標題),也可以作為TabNavigator的tabBarLabel以及DrawerNavigator的drawerLabel。
- header: 自定義導航條,可以通過設置null來隱藏導航條;
- headerTitle: 標題;
- headerTitleAllowFontScaling: 標題是否允許縮放,默認true;
- headerBackTitle: 定義在iOS上當前頁面進入到下一頁面的回退標題,可以通過設置null來禁用它;
- headerTruncatedBackTitle: 當回退標題不能顯示的時候顯示此屬性的標題,比如回退標題太長了;
- headerBackImage:React 元素或組件在標題的后退按鈕中顯示自定義圖片。 當組件被調用時,它會在渲染時收到許多 props 如:(tintColor,title)。 默認為帶有 react-navigation/views/assets/back-icon.png 這張圖片的組件,后者是平臺的默認后圖標圖像(iOS上為向左的符號,Android上為箭頭)。
- headerRight: 定義導航欄右邊視圖;
- headerLeft: 定義導航欄左邊視圖;
- headerStyle: 定義導航欄的樣式,比如背景色等;
- headerTitleStyle: 定義標題的樣式;
- headerLeftContainerStyle:自定義 headerLeft 組件容器的樣式,例如,增加 padding。
- headerRightContainerStyle:自定義 headerRight 組件容器的樣式,,例如,增加 padding。
- headerTitleContainerStyle:自定義 headerTitle 組件容器的樣式, 例如,增加 padding。
- headerBackTitleStyle: 定義返回標題的樣式;
- headerPressColorAndroid:顏色為材料波紋 (Android >= 5.0);
- headerTintColor: 定義導航條的tintColor,會覆蓋headerTitleStyle中的顏色;
- headerTransparent:默認為 false。如果 true, 則標頭將不會有背景, 除非您顯式提供 headerStyle 或 headerBackground。
- headerBackground:與headerTransparent一起使用,以提供在標題后臺呈現的組件。 例如,您可以使用模糊視圖來創建半透明標題。
- gesturesEnabled: 定義是否能側滑返回,iOS默認true,Android默認false;
- gestureResponseDistance: 定義滑動返回的有效距離,水平狀態下默認:25,垂直狀態默認135;
- gestureDirection: 設置關閉手勢的方向。默認從左向右,可以設置從右到左的滑動操作。
【案例】使用StackNavigator做界面導航、配置navigationOptions
第一步:創建一個StackNavigator類型的導航器
export const AppStackNavigator = createStackNavigator({
HomePage: {
screen: HomePage
},
Page1: {
screen: Page1,
navigationOptions: ({navigation}) => ({
title: `${navigation.state.params.name}頁面名`//動態設置navigationOptions
})
},
Page2: {
screen: Page2,
navigationOptions: {//在這里定義每個頁面的導航屬性,靜態配置
title: "This is Page2.",
}
},
Page3: {
screen: Page3,
navigationOptions: (props) => {//在這里定義每個頁面的導航屬性,動態配置
const {navigation} = props;
const {state, setParams} = navigation;
const {params} = state;
return {
title: params.title ? params.title : 'This is Page3',
headerRight: (
<Button
title={params.mode === 'edit' ? '保存' : '編輯'}
onPress={() =>
setParams({mode: params.mode === 'edit' ? '' : 'edit'})}
/>
),
}
}
},
}, {
defaultNavigationOptions: {
// header: null,// 可以通過將header設為null 來禁用StackNavigator的Navigation Bar
}
});
第二步:配置navigationOptions:
步驟一的代碼中通過兩種方式配值了navigationOptions:
靜態配置:
對Page2的navigationOptions配置是通過靜態配置完成的:
Page2: {
screen: Page2,
navigationOptions: {//在這里定義每個頁面的導航屬性,靜態配置
title: "This is Page2.",
}
},
這種方式被稱為靜態配置,因為navigationOptions中的參數是直接Hard Code的不依賴于變量。
動態配置:
對Page3的navigationOptions配置是通過動態配置完成的:
Page3: {
screen: Page3,
navigationOptions: (props) => {//在這里定義每個頁面的導航屬性,動態配置
const {navigation} = props;
const {state, setParams} = navigation;
const {params} = state;
return {
title: params.title ? params.title : 'This is Page3',
headerRight: (
<Button
title={params.mode === 'edit' ? '保存' : '編輯'}
onPress={() =>
setParams({mode: params.mode === 'edit' ? '' : 'edit'})}
/>
),
}
}
},
從上述代碼中可以看出Page3的navigationOptions依賴于props這個變量所以是動態的,當props中的內容發生變化時,navigationOptions也會跟著變化;
提示:除了在創建createStackNavigator時配置navigationOptions外,在StackNavigator之外也可以配置navigationOptions;
createStackNavigator之外也可以配置navigationOptions
// 方式一:
Page2.navigationOptions = {
title: "This is Page2.",
};
// 方式二:
export default class Page1 extends React.Component {
//也可在這里定義每個頁面的導航屬性,這里的定義會覆蓋掉別處的定義
static navigationOptions = {
title: 'Page1',
};
...
第三步:界面跳轉
export default class HomePage extends React.Component {
//在這里定義每個頁面的導航屬性
static navigationOptions = {
title: 'Home',
headerBackTitle:'返回哈哈',//設置返回此頁面的返回按鈕文案,有長度限制
}
render() {
const {navigation} = this.props;
return <View style=>
<Text style={styles.text}>歡迎來到HomePage</Text>
<Button
title="Go To Page1"
onPress={() => {
navigation.navigate('Page1', {name: '動態的'});
}}
/>
<Button
title="Go To Page2"
onPress={() => {
navigation.navigate('Page2');
}}
/>
<Button
title="Go To Page3"
onPress={() => {
navigation.navigate('Page3',{ name: 'Devio' });
}}
/>
</View>
}
}
頁面跳轉可分為兩步:
-
- 獲取navigation:
const {navigation} = this.props;
-
- 通過
navigate(routeName, params, action)
進行頁面跳轉:
navigation.navigate('Page2'); navigation.navigate('Page3',{ name: 'Devio' });
這里在跳轉到
Page3
的時候傳遞了參數{ name: 'Devio' }
; - 通過
第四步:更新頁面Params與返回
export default class Page3 extends React.Component {
render() {
const {navigation} = this.props;
const {state, setParams} = navigation;
const {params} = state;
const showText = params.mode === 'edit' ? '正在編輯' : '編輯完成';
return <View style=>
<Text style={styles.text}>歡迎來到Page3</Text>
<Text style={styles.showText}>{showText}</Text>
<TextInput
style={styles.input}
onChangeText={text=>{
setParams({title:text})
}}
/>
<Button
title="Go Back"
onPress={() => {
navigation.goBack();
}}
/>
</View>
}
}
在上述代碼中通過:
<TextInput
style={styles.input}
onChangeText={text=>{
setParams({title:text})
}}
/>
將輸入框中內容的變化,通過setParams({title:text})
更新到頁面的標題上,你會看到當輸入框中內容發生變化時,標題也會跟著變。
當用戶單擊Go Back
按鈕時,通過:
navigation.goBack();//實現了返回上一頁