1.介紹
react-navigation庫包含三個組件：
- StackNavigator:用來跳轉頁面和傳遞參數；
- TabNavigation:類似底部導航欄，在同一屏幕下，切換不同的頁面；
- DrawerNavigator:側滑菜單導航欄，設置帶抽屜的導航菜單。
2.React-Navigation的使用
2.1 StackNavigator的屬性
- navigationOptions屬性：配置stackNavigator的屬性
參數：
title:標題，設置屬性使得導航欄和標題欄的標題一樣，不推薦使用；
visible:導航欄是否顯示；
headerTitle:導航欄的標題，推薦；
headerBackTitle:左上角返回鍵的文字，默認上一個頁面的title；
headerTruncatedBackTitle:設置當上一個頁面不符合返回箭頭文字時，默認‘返回’；
headerRight:導航欄右側按鈕，可以是按鈕或是其他組件；
headerLeft:導航欄左側按鈕，可以是按鈕或是其他組件；
headerStyle:導航欄的樣式；
headerTitleStyle:導航欄title標題的樣式；
headerBackTitleStyle:導航欄返回文字樣式；
headerTintColor:導航欄顏色；
headerPressColorAndroid:設置顏色紋理，安卓獨有；
gesturesEnabled:是否允許右滑返回，ios默認true，android默認false;
- screen:對應界面名稱，需要填入import之後的頁面；
- stackNavigatorConfig:
參數：
initialRouteName:設置默認的頁面組件，必須是上面已經註冊的頁面；
initialRouteParams:初始路由的參數；
navigationOptions:屏幕導航的默認選項；
paths:RouteConfigs中路徑設置的映射；
mode:頁面切換的模式，定義跳轉風格；
card:普通app常用的左右切換模式，ios和android默認的效果；
model:上下切換；
headerMode: 導航欄的顯示模式，返回上一級時的動畫效果；
float:無透明狀態，ios默認的效果；
screen:有漸變透明狀態；
none:隱藏導航欄，無動畫；
cardStyle:自定義設置跳轉效果；
transitionConfig:自定義設置滑動返回的配置；
onTransitionStart:當轉換動畫即將開始的時候被調用；
onTransitionEnd:當轉換動畫結束的時候被調用；
2.2 TabNavigator的屬性
2.3 DrawerNavigator的屬性
3.React-Navigation實例
3.1 StackNavigator的實例
3.1.1 屬性基本設置
import {AppRegistry} from 'react-native'; import {StackNavigator} from 'react-navigation';
import MainScreen from './StackNavigator/Main/MainScreen' import MessageScreen from './StackNavigator/Message/MessageScreen' import MyScreen from './StackNavigator/My/MyScreen' //StackNavigator const SNavigator = StackNavigator({ Main:{ screen:MainScreen, navigationOptions:{ headerTitle:'首頁', headerTitleStyle:{color:'#000',fontSize:15}, headerStyle:{backgroundColor:'#fff'}, gesturesEnabled:true,//是否允許右滑返回，ios默認true，android默認false; }, }, Message:{ screen:MessageScreen, navigationOptions:'',//此處設置了, 會覆蓋組件內的`static navigationOptions`設置 }, My:{screen:MyScreen}, },{ initialRouteName:'Main',//默認顯示的頁面 mode:'card',//頁面切換的模式，定義跳轉風格,左右card，上下model headerMode:'screen',//導航欄的顯示模式, screen: 有漸變透明效果, float: 無透明效果, none: 隱藏導航欄 }) AppRegistry.registerComponent('ImageDemo', () => SNavigator);
MainScreen.js代碼：
import React,{Component} from 'react' import { StyleSheet, View, Text, } from 'react-native' export default class MainScreen extends Component{ constructor(props){ super(props) } render(){ return ( <View style={styles.container}> <Text>MainScreen</Text> </View> ) } } const styles = StyleSheet.create({ container:{ flex:1, }, })效果：
3.1.2 頁面的跳轉頁傳值
import {AppRegistry} from 'react-native'; import {StackNavigator} from 'react-navigation';
import MainScreen from './StackNavigator/Main/MainScreen' import MessageScreen from './StackNavigator/Message/MessageScreen' import MyScreen from './StackNavigator/My/MyScreen'
//StackNavigator
const SNavigator = StackNavigator({
Main:{
screen:MainScreen,
navigationOptions:{},
},
Message:{
screen:MessageScreen,
navigationOptions:{},//此處設置了, 會覆蓋組件內的`static navigationOptions`設置
},
My:{screen:MyScreen},
},{
initialRouteName:'Main',//默認顯示的頁面
mode:'card',//頁面切換的模式，定義跳轉風格,左右card，上下model
headerMode:'screen',//導航欄的顯示模式, screen: 有漸變透明效果, float: 無透明效果, none: 隱藏導航欄
})
AppRegistry.registerComponent('ImageDemo', () => SNavigator);
MainScreen.js代碼：
import React,{Component} from 'react' import { StyleSheet, View, Text, } from 'react-native' import Images from '../resource/images' import TitleBar from '../components/TitleBar' export default class MainScreen extends Component{ constructor(props){ super(props) } render(){ return ( <View style={{flex:1}}> <TitleBar title='首頁' rightIcon={Images.ic_notification} leftPress={() => { }} rightPress={() => { this._navigateToScreen('Message'); }}></TitleBar> <View style={styles.container}> <Text>首頁</Text> </View> </View> ) } _navigateToScreen(screen){ const {navigate} = this.props.navigation navigate(screen) } } const styles = StyleSheet.create({ container:{ flex:1, justifyContent:'center', alignItems:'center', }, })images.js圖片資源：
const images = { ic_back:require('./imgs/back.png'), ic_notification:require('./imgs/notifications.png'), } export default images TitleBar.js代碼：
import React,{Component,PropTypes} from 'react' import { StyleSheet, Text, } from 'react-native' import ImageButton from './ImageButton' import {Header,Body,Title,Left,Right} from 'native-base' export default class TitleBar extends Component{ constructor(props){ super(props) } static propsType={ title:React.PropTypes.string, leftIcon:React.PropTypes.number, rightIcon:React.PropTypes.number, rightTitle:React.PropTypes.string, rightPress:React.PropTypes.func, leftPress:React.PropTypes.func, } render(){ return ( <Header style={{backgroundColor:'#fff'}}> <Left> <ImageButton style={styles.image_header_left} source={this.props.leftIcon} onPress={this.props.leftPress}> </ImageButton> </Left> <Body> <Title style={{color:'#000'}}> {this.props.title} </Title> </Body> <Right> {this._renderRight()} </Right> </Header> ) } /** * 根據傳入值判斷右邊渲染文字還是圖標 */ _renderRight(){ if(this.props.rightIcon){ return ( <ImageButton style={styles.image_header_right} source={this.props.rightIcon} onPress={this.props.rightPress} /> ) }else if (this.props.rightTitle){ return ( <Text style={styles.text_right_title}> {this.props.rightTitle} </Text> ) } } }
ImageButton.js代碼(圖片按鈕):
import React,{Component} from 'react' import { Image, TouchableWithoutFeedback, } from 'react-native' export default class ImageButton extends Component{ constructor(props){ super(props) } render(){ return ( <TouchableWithoutFeedback onPress={this.props.onPress}> <Image style={this.props.style} source={this.props.source}> {this.props.children} </Image> </TouchableWithoutFeedback> ) } }效果：(點擊右側消息按鈕跳轉到消息頁面，點擊消息的回退按鈕，返回到上一頁面)
