[React-Native]react-navigation 使用

一、開源庫介紹

今年1月份，新開源的React-natvigation庫備受矚目。在短短不到3個月的時間，github上星數已達4000+。Fb推薦使用庫，并且在react Native當前最新版本0.44中將Navigator刪除。react-navigation據稱有原生般的性能體驗效果。可能會成為未來React Native導航組件的主流軍。

本篇內容基于【 ^1.0.0-beta.9 】版本來介紹關于該庫的使用和實戰技巧。可以看到，雖然是beta版本，不過基本穩定，大家可放心在項目中使用。該庫包含三類組件：

（1）StackNavigator：用來跳轉頁面和傳遞參數
（2）TabNavigator：類似底部導航欄，用來在同一屏幕下切換不同界面
（3）DrawerNavigator：側滑菜單導航欄，用于輕松設置帶抽屜導航的屏幕

二、react-navigation使用

具體內容大致分為如下：
（1）react-navigation庫屬性介紹
（2）StackNavigator、TabNavigator實現界面間跳轉，Tab切換
（3）StackNavigator界面間跳轉、傳值、取值
（4）DrawerNavigator實現抽屜導航菜單
（5）DrawerNavigator擴展功能
（6）自定義react-navigation

1、StackNavigator屬性介紹

navigationOptions：配置StackNavigator的一些屬性。  
  
    title：標題，如果設置了這個導航欄和標簽欄的title就會變成一樣的，不推薦使用  
    header：可以設置一些導航的屬性，如果隱藏頂部導航欄只要將這個屬性設置為null  
    headerTitle：設置導航欄標題，推薦  
    headerBackTitle：設置跳轉頁面左側返回箭頭后面的文字，默認是上一個頁面的標題。可以自定義，也可以設置為null  
    headerTruncatedBackTitle：設置當上個頁面標題不符合返回箭頭后的文字時，默認改成"返回"  
    headerRight：設置導航條右側。可以是按鈕或者其他視圖控件  
    headerLeft：設置導航條左側。可以是按鈕或者其他視圖控件  
    headerStyle：設置導航條的樣式。背景色，寬高等  
    headerTitleStyle：設置導航欄文字樣式  
    headerBackTitleStyle：設置導航欄‘返回’文字樣式  
    headerTintColor：設置導航欄顏色  
    headerPressColorAndroid：安卓獨有的設置顏色紋理，需要安卓版本大于5.0  
    gesturesEnabled：是否支持滑動返回手勢，iOS默認支持，安卓默認關閉  
   
  
screen：對應界面名稱，需要填入import之后的頁面  
  
mode：定義跳轉風格  
  
   card：使用iOS和安卓默認的風格  
  
   modal：iOS獨有的使屏幕從底部畫出。類似iOS的present效果  
  
headerMode：返回上級頁面時動畫效果  
  
   float：iOS默認的效果  
  
   screen：滑動過程中，整個頁面都會返回  
  
   none：無動畫  
  
cardStyle：自定義設置跳轉效果  
  
   transitionConfig： 自定義設置滑動返回的配置  
  
   onTransitionStart：當轉換動畫即將開始時被調用的功能  
  
   onTransitionEnd：當轉換動畫完成，將被調用的功能  
  
path：路由中設置的路徑的覆蓋映射配置  
  
initialRouteName：設置默認的頁面組件，必須是上面已注冊的頁面組件  
  
initialRouteParams：初始路由參數  ```

注：大家可能對于path不太理解。path屬性適用于其他app或瀏覽器使用url打開本app并進入指定頁面。path屬性用于聲明一個界面路徑，例如：【/pages/Home】。此時我們可以在手機瀏覽器中輸入：app名稱://pages/Home來啟動該App，并進入Home界面。

##2、TabNavigator屬性介紹

screen：和導航的功能是一樣的，對應界面名稱，可以在其他頁面通過這個screen傳值和跳轉。

navigationOptions：配置TabNavigator的一些屬性

title：標題，會同時設置導航條和標簽欄的title

tabBarVisible：是否隱藏標簽欄。默認不隱藏(true)

tabBarIcon：設置標簽欄的圖標。需要給每個都設置

tabBarLabel：設置標簽欄的title。推薦

導航欄配置

tabBarPosition：設置tabbar的位置，iOS默認在底部，安卓默認在頂部。（屬性值：'top'，'bottom'）

swipeEnabled：是否允許在標簽之間進行滑動

animationEnabled：是否在更改標簽時顯示動畫

lazy：是否根據需要懶惰呈現標簽，而不是提前，意思是在app打開的時候將底部標簽欄全部加載，默認false,推薦為true

trueinitialRouteName：設置默認的頁面組件

backBehavior：按 back 鍵是否跳轉到第一個Tab(首頁)， none 為不跳轉

tabBarOptions：配置標簽欄的一些屬性iOS屬性

activeTintColor：label和icon的前景色活躍狀態下

activeBackgroundColor：label和icon的背景色活躍狀態下

inactiveTintColor：label和icon的前景色不活躍狀態下

inactiveBackgroundColor：label和icon的背景色不活躍狀態下

showLabel：是否顯示label，默認開啟 style：tabbar的樣式

labelStyle：label的樣式安卓屬性

activeTintColor：label和icon的前景色活躍狀態下

inactiveTintColor：label和icon的前景色不活躍狀態下

showIcon：是否顯示圖標，默認關閉

showLabel：是否顯示label，默認開啟 style：tabbar的樣式

labelStyle：label的樣式 upperCaseLabel：是否使標簽大寫，默認為true

pressColor：material漣漪效果的顏色（安卓版本需要大于5.0）

pressOpacity：按壓標簽的透明度變化（安卓版本需要小于5.0）

scrollEnabled：是否啟用可滾動選項卡 tabStyle：tab的樣式

indicatorStyle：標簽指示器的樣式對象（選項卡底部的行）。安卓底部會多出一條線，可以將height設置為0來暫時解決這個問題

labelStyle：label的樣式

iconStyle：圖標樣式 ```

3、DrawerNavigator屬性介紹

DrawerNavigatorConfig  
  
    drawerWidth - 抽屜的寬度  
    drawerPosition - 選項是左或右。 默認為左側位置  
    contentComponent - 用于呈現抽屜內容的組件，例如導航項。 接收抽屜的導航。 默認為DrawerItems  
    contentOptions - 配置抽屜內容  
  
    initialRouteName - 初始路由的routeName  
    order - 定義抽屜項目順序的routeNames數組。  
    路徑 - 提供routeName到路徑配置的映射，它覆蓋routeConfigs中設置的路徑。  
    backBehavior - 后退按鈕是否會切換到初始路由？ 如果是，設置為initialRoute，否則為none。 默認為initialRoute行為  
  
   DrawerItems的contentOptions屬性  
  
    activeTintColor - 活動標簽的標簽和圖標顏色  
    activeBackgroundColor - 活動標簽的背景顏色  
    inactiveTintColor - 非活動標簽的標簽和圖標顏色  
    inactiveBackgroundColor - 非活動標簽的背景顏色  
    內容部分的樣式樣式對象  
    labelStyle - 當您的標簽是字符串時，要覆蓋內容部分中的文本樣式的樣式對象 ```

從上述中大致了解了react-navigation三種組件的一些基本屬性，所以到我們甩起袖子擼代碼見證下奇跡了。

##4、使用StackNavigator + TabNavigator實現Tab界面切換、界面間導航

API定義：StackNavigator(RouteConfigs, StackNavigatorConfig)、TabNavigator(RouteConfigs, TabNavigatorConfig)

（1）集成 react-navigation：在終端執行 【 npm install react-navigation --save 】

（2）界面中導入必要組件：

import {StackNavigator,TabNavigator,TabBarBottom} from 'react-navigation';
import HomeScreen from './pages/HomePage';
import MineScreen from './pages/MinePage'; ```
（3）定義TabNavigator：

const Tab = TabNavigator(  
  {  
    Home:{  
      screen:HomeScreen,  
      navigationOptions:({navigation}) => ({  
        tabBarLabel:'首頁',  
        tabBarIcon:({focused,tintColor}) => (  
          <TabBarItem  
            tintColor={tintColor}  
            focused={focused}  
            normalImage={require('./imgs/nav_fav@2x.png')}  
            selectedImage={require('./imgs/nav_fav_actived@3x.png')}  
          />  
        )  
      }),  
    },  
  
    Mine:{  
          screen:MineScreen,  
          navigationOptions:({navigation}) => ({  
          tabBarLabel:'我',  
          tabBarIcon:({focused,tintColor}) => (  
            <TabBarItem  
             tintColor={tintColor}  
              focused={focused}  
              normalImage={require('./imgs/tab_me_nor@3x.png')}  
              selectedImage={require('./imgs/tab_me_selected@2x.png')}  
            />  
          )  
        }),  
      },  
    },  
  
    {  
      tabBarComponent:TabBarBottom,  
      tabBarPosition:'bottom',  
      swipeEnabled:false,  
      animationEnabled:false,  
      lazy:true,  
      tabBarOptions:{  
        activeTintColor:'#06c1ae',  
        inactiveTintColor:'#979797',  
        style:{backgroundColor:'#ffffff',},  
        labelStyle: {  
              fontSize: 20, // 文字大小  
          },  
      }  
        
    }  
  
  );  

TabBarItem為封裝的組件：**[html]** [view plain](http://blog.csdn.net/u013718120/article/details/72357698#) [copy](http://blog.csdn.net/u013718120/article/details/72357698#)

import React,{Component} from 'react';  
import {Image} from 'react-native';  
  
export default class TabBarItem extends Component {  
  
    render() {  
        return(  
            <Image source={ this.props.focused ? this.props.selectedImage : this.props.normalImage }  
                style={ { tintColor:this.props.tintColor,width:25,height:25 } }  
            />  
        )  
    }  
      
}  ```

可以看到，我們定義了一個名稱為【Tab】的TabNavigator的導航組件。在組件中，分為兩層參數：

######（1）第一層參數定義了要切換的界面，即【首頁】、【我】兩個界面組件，通過screen屬性指定。并且通過navigationOptions屬性設置相關屬性參數。

######（2）設置導航欄的屬性參數。

TabNavigator定義好之后，需要用StackNavigator，顧名思義，StackNavigator就是以棧的方式來存放整個界面的，而TabNavigator是作為一個界面內不同子界面之間切換。所以還需要我們定義StackNavigator：

const Navigator = StackNavigator(

{
Tab:{screen:Tab},
Product:{screen:ProductScreen}
},

{
navigationOptions:{
headerBackTitle:null,
headerTintColor:'#333333',
showIcon:true,
swipeEnabled:false,
animationEnabled:false,
},

mode:'card',

});

看起來和TabNavigator很相似，同樣是指定了兩個參數：

######（1）指定要跳轉的界面組件。同樣是screen屬性標識界面組件，不多贅述。

######（2）定義跳轉屬性參數，即頂部導航欄的一些參數設置和跳轉方式。

可以看到，我們將Tab作為一個界面設置到了StackNavigator。這樣就可以實現Tab導航和界面間跳轉的效果了。

最后就是在render中引用StackNavigator：

export default class Demo extends Component {

render() {
return (
<Navigator />
);
}
}

StackNavigator還提供了onNavigationStateChange回調方法，用來監聽導航狀態的改變。具體不再贅述。實現了界面跳轉和切換，那么就該來增加下界面之間的感情了，來看看如何實現界面之間的傳值和取值。

#5、界面間跳轉、傳值、取值

在界面組件注入到StackNavigator中時，界面組件就被賦予了navigation屬性，即在界面組件中可以通過【this.props.navigation】獲取并進行一些操作。

navigation屬性中提供了很多的函數簡化界面間操作，簡單列舉幾點：

######（1）通過navigate函數實現界面之間跳轉：

this.props.navigation.navigate('Mine'); ```
參數為我們在StackNavigator注冊界面組件時的名稱。同樣也可以從當前頁面返回到上一頁：

// 返回上一頁  
this.props.navigation.goBack(); ```
######（2）跳轉時傳值：

this.props.navigation.navigate('Mine',{info:'傳值過去'});

第一個參數同樣為要跳轉的界面組件名稱，第二個參數為要傳遞的參數，info可以理解為key，后面即傳遞的參數。

######（3）獲取值：

{this.props.navigation.state.params.info}

通過state.params來獲取傳來的參數，后面為key值。此處為info。

以上實現完成，我們就可以愉快的玩耍啦~~ 什么？忽然發現在Android上的效果和IOS效果不一樣。老板要界面一致哇~ 怎么辦？那就需要我們進行簡單的適配了。

#三、DrawerNavigator實現抽屜導航

##1、導航實現

API定義：DrawerNavigator（RouteConfigs，DrawerNavigatorConfig）

######（1）界面中定義DrawerNavigator：

import {StackNavigator,TabNavigator,DrawerNavigator} from 'react-navigation';
import HomeScreen from './pages/HomePage';
import MineScreen from './pages/MinePage';

export default class Demo extends Component {

render() {
return (
<Navigator />
);
}
}

const Navigator = DrawerNavigator({

Home:{screen:HomeScreen},  
Mine:{screen:MineScreen},

});

const styles = StyleSheet.create({

container: {  
    flex: 1,  
},

});

AppRegistry.registerComponent('Demo', () => Demo); ```

定義方式和StackNavigator基本類似，不再贅述。

（2）HomeScreen界面和MineScreen界面：

export default class HomePage extends Component {

static navigationOptions = {  
    drawerLabel: '首頁',  
    drawerIcon:({tintColor}) => (  
        <Image  
            source={require('./../imgs/ic_happy.png')}  
            style={[styles.icon, {tintColor: tintColor}]}/>  
    ),  
};  

render() {  
    return(  
        <View style={{flex:1}}>  
            <Text onPress={this._skip.bind(this)}>點擊跳轉</Text>  
        </View>  
    );  
}  

_skip() {  
    this.props.navigation.navigate("Mine");  
}

}

export default class MinePage extends Component {

static navigationOptions = {  
    drawerLabel:'我',  
     drawerIcon: ({ tintColor }) => (  
        <Image  
            source={require('./../imgs/ic_h.png')}  
            style={[styles.icon, {tintColor: tintColor}]}  
        />  
    ),  
};  

render() {  
    return(  
        <View style={{flex:1}}>  
            <Text onPress={this._skip.bind(this)}>返回上一界面</Text>  
        </View>  
    );  
}  

/**  
 * 跳轉  
 */  
_skip() {  
    this.props.navigation.goBack();  
}

} ```

代碼很簡單，實現了界面之間的跳轉。

2、擴展功能

（1）默認DrawerView不可滾動。要實現可滾動視圖，必須使用contentComponent自定義容器，如下所示：

{  
  drawerWidth：200，  
  抽屜位置：“對”  
  contentComponent：props => <ScrollView> <DrawerItems {... props} /> </ ScrollView>  
}

（2）可以覆蓋導航使用的默認組件，使用DrawerItems自定義導航組件：

import {DrawerItems} from 'react-navigation';  
  
const CustomDrawerContentComponent = (props) => (  
  <View style = {style.container}>  
    <DrawerItems {... props} />  
  </View>    
);  ```
###### （3）嵌套抽屜導航
如果您嵌套DrawerNavigation，抽屜將顯示在父導航下方。

#四、自定義react-navigation

######（1）適配頂部導航欄標題：
   測試中發現，在iphone上標題欄的標題為居中狀態，而在Android上則是居左對齊。所以需要我們修改源碼，進行適配。
【node_modules -- react-navigation -- src -- views -- Header.js】的326行代碼處，修改為如下：

title: {
bottom: 0,
left: TITLE_OFFSET,
right: TITLE_OFFSET,
top: 0,
position: 'absolute',
alignItems: 'center',
}

上面方法通過修改源碼的方式其實略有弊端，畢竟擴展性不好。還有另外一種方式就是，在navigationOptions中設置headerTitleStyle的alignSelf為 ' center '即可解決。

######（2）去除返回鍵文字顯示：
【node_modules -- react-navigation -- src -- views -- HeaderBackButton.js】的91行代碼處，修改為如下即可。

{Platform.OS === 'ios' &&
title &&
<Text
onLayout={this._onTextLayout}
style={[styles.title, { color: tintColor }]}
numberOfLines={1}
>
{backButtonTitle}
</Text>} ```

將上述代碼刪除即可。

（3）動態設置頭部按鈕事件：

當我們在頭部設置左右按鈕時，肯定避免不了要設置按鈕的單擊事件，但是此時會有一個問題，navigationOptions是被修飾為static類型的，所以我們在按鈕的onPress的方法中不能直接通過this來調用Component中的方法。如何解決呢？在官方文檔中，作者給出利用設置params的思想來動態設置頭部標題。那么我們可以利用這種方式，將單擊回調函數以參數的方式傳遞到params，然后在navigationOption中利用navigation來取出設置到onPress即可：

componentDidMount () {  
    /**  
     * 將單擊回調函數作為參數傳遞  
     */  
    this.props.navigation.setParams({  
            switch: () => this.switchView()  
    });  
}  ```

/**

切換視圖
*/
switchView() {
alert('切換')
} ```

static navigationOptions = ({navigation,screenProps}) => ({  
    headerTitle: '企業服務',  
    headerTitleStyle: CommonStyles.headerTitleStyle,  
    headerRight: (  
        <NavigatorItem icon={ Images.ic_navigator } onPress={ ()=> navigation.state.params.switch() }/>  
    ),  
    headerStyle: CommonStyles.headerStyle  
});  ```
######（4）結合BackHandler處理返回和點擊返回鍵兩次退出App效果
點擊返回鍵兩次退出App效果的需求屢見不鮮。相信很多人在react-navigation下實現該功能都遇到了很多問題，例如，其他界面不能返回。也就是手機本身返回事件在react-navigation之前攔截了。如何結合react-natigation實現呢？和大家分享兩種實現方式：
（1）在注冊StackNavigator的界面中，注冊BackHandler：

componentWillMount(){
BackHandler.addEventListener('hardwareBackPress', this._onBackAndroid );
}

componentUnWillMount(){
BackHandler.addEventListener('hardwareBackPress', this._onBackAndroid);
}

_onBackAndroid=()=>{
let now = new Date().getTime();
if(now - lastBackPressed < 2500) {
return false;
}
lastBackPressed = now;
ToastAndroid.show('再點擊一次退出應用',ToastAndroid.SHORT);
return true;

（2）監聽react-navigation的Router

/**

處理安卓返回鍵
*/
const defaultStateAction = AppNavigator.router.getStateForAction;
AppNavigator.router.getStateForAction = (action,state) => {
if(state && action.type === NavigationActions.BACK && state.routes.length === 1) {
if (lastBackPressed + 2000 < Date.now()) {
ToastAndroid.show(Constant.hint_exit,ToastAndroid.SHORT);
lastBackPressed = Date.now();
const routes = [...state.routes];
return {
...state,
...state.routes,
index: routes.length - 1,
};
}
}
return defaultStateAction(action,state);
};

######（5）實現[Android](http://lib.csdn.net/base/android)中界面跳轉左右切換動畫
react-navigation在[android](http://lib.csdn.net/base/android)中默認的界面切換動畫是上下。如何實現左右切換呢？很簡單的配置即可：

import CardStackStyleInterpolator from 'react-navigation/src/views/CardStackStyleInterpolator';

然后在StackNavigator的配置下添加如下代碼：

transitionConfig:()=>({
screenInterpolator: CardStackStyleInterpolator.forHorizontal,
})

######（6）解決快速點擊多次跳轉
當我們快速點擊跳轉時，會開啟多個重復的界面，如何解決呢。其實在官方[Git](http://lib.csdn.net/base/git)中也有提示，解決這個問題需要修改react-navigation源碼：
找到**scr**文件夾中的**addNavigationHelpers**.[js](http://lib.csdn.net/base/javascript)文件,替換為如下文本即可：

export default function<S: >(navigation: NavigationProp<S, NavigationAction>) {
// 添加點擊判斷
let debounce = true;
return {
...navigation,
goBack: (key?: ?string): boolean =>
navigation.dispatch(
NavigationActions.back({
key: key === undefined ? navigation.state.key : key,
}),
),
navigate: (routeName: string,
params?: NavigationParams,
action?: NavigationAction,): boolean => {
if (debounce) {
debounce = false;
navigation.dispatch(
NavigationActions.navigate({
routeName,
params,
action,
}),
);
setTimeout(
() => {
debounce = true;
},
500,
);
return true;
}
return false;
},
/*
* For updating current route params. For example the nav bar title and
* buttons are based on the route params.
* This means setParams can be used to update nav bar for example.
*/
setParams: (params: NavigationParams): boolean =>
navigation.dispatch(
NavigationActions.setParams({
params,
key: navigation.state.key,
}),
),
};
} ```

五、效果圖

抽屜導航：

image.png

以上就是我們實戰中常用的屬性和技巧。具體的操作還需要大家在實踐過程中測試體會。
轉載于http://blog.csdn.net/u013718120/article/details/72357698

最后編輯于：2017.12.08 06:20:36

?著作權歸作者所有,轉載或內容合作請聯系作者
平臺聲明：文章內容（如有圖片或視頻亦包括在內）由作者上傳并發布，文章內容僅代表作者本人觀點，簡書系信息發布平臺，僅提供信息存儲服務。

人面猴
序言：七十年代末，一起剝皮案震驚了整個濱河市，隨后出現的幾起案子，更是在濱河造成了極大的恐慌，老刑警劉巖，帶你破解...
沈念sama閱讀 227,837評論 6贊 531
死咒
序言：濱河連續發生了三起死亡事件，死亡現場離奇詭異，居然都是意外死亡，警方通過查閱死者的電腦和手機，發現死者居然都...
沈念sama閱讀 98,196評論 3贊 414
救了他兩次的神仙讓他今天三更去死
文/潘曉璐我一進店門，熙熙樓的掌柜王于貴愁眉苦臉地迎上來，“玉大人，你說我怎么就攤上這事。” “怎么了？”我有些...
開封第一講書人閱讀 175,688評論 0贊 373
道士緝兇錄：失蹤的賣姜人
文/不壞的土叔我叫張陵，是天一觀的道長。經常有香客問我，道長，這世上最難降的妖魔是什么？我笑而不...
開封第一講書人閱讀 62,654評論 1贊 309
?港島之戀（遺憾婚禮）
正文為了忘掉前任，我火速辦了婚禮，結果婚禮上，老公的妹妹穿的比我還像新娘。我一直安慰自己，他們只是感情好，可當我...
茶點故事閱讀 71,456評論 6贊 406
惡毒庶女頂嫁案：這布局不是一般人想出來的
文/花漫我一把揭開白布。她就那樣靜靜地躺著，像睡著了一般。火紅的嫁衣襯著肌膚如雪。梳的紋絲不亂的頭發上，一...
開封第一講書人閱讀 54,955評論 1贊 321
城市分裂傳說
那天，我揣著相機與錄音，去河邊找鬼。笑死，一個胖子當著我的面吹牛，可吹牛的內容都是我干的。我是一名探鬼主播，決...
沈念sama閱讀 43,044評論 3贊 440
雙鴛鴦連環套：你想象不到人心有多黑
文/蒼蘭香墨我猛地睜開眼，長吁一口氣：“原來是場噩夢啊……” “哼！你這毒婦竟也來了？” 一聲冷哼從身側響起，我...
開封第一講書人閱讀 42,195評論 0贊 287
萬榮殺人案實錄
序言：老撾萬榮一對情侶失蹤，失蹤者是張志新（化名）和其女友劉穎，沒想到半個月后，有當地人在樹林里發現了一具尸體，經...
沈念sama閱讀 48,725評論 1贊 333
?護林員之死
正文獨居荒郊野嶺守林人離奇死亡，尸身上長有42處帶血的膿包…… 初始之章·張勛以下內容為張勛視角年9月15日...
茶點故事閱讀 40,608評論 3贊 354
?白月光啟示錄
正文我和宋清朗相戀三年，在試婚紗的時候發現自己被綠了。大學時的朋友給我發了我未婚夫和他白月光在一起吃飯的照片。...
茶點故事閱讀 42,802評論 1贊 369
活死人
序言：一個原本活蹦亂跳的男人離奇死亡，死狀恐怖，靈堂內的尸體忽然破棺而出，到底是詐尸還是另有隱情，我是刑警寧澤，帶...
沈念sama閱讀 38,318評論 5贊 358
?日本核電站爆炸內幕
正文年R本政府宣布，位于F島的核電站，受9級特大地震影響，放射性物質發生泄漏。R本人自食惡果不足惜，卻給世界環境...
茶點故事閱讀 44,048評論 3贊 347
男人毒藥：我在死后第九天來索命
文/蒙蒙一、第九天我趴在偏房一處隱蔽的房頂上張望。院中可真熱鬧，春花似錦、人聲如沸。這莊子的主人今日做“春日...
開封第一講書人閱讀 34,422評論 0贊 26
一樁弒父案，背后竟有這般陰謀
文/蒼蘭香墨我抬頭看了看天上的太陽。三九已至，卻和暖如春，著一層夾襖步出監牢的瞬間，已是汗流浹背。一陣腳步聲響...
開封第一講書人閱讀 35,673評論 1贊 281
情欲美人皮
我被黑心中介騙來泰國打工，沒想到剛下飛機就差點兒被人妖公主榨干…… 1. 我叫王不留，地道東北人。一個月前我還...
沈念sama閱讀 51,424評論 3贊 390
代替公主和親
正文我出身青樓，卻偏偏與公主長得像，于是被迫代替她去往敵國和親。傳聞我的和親對象是個殘疾皇子，可洞房花燭夜當晚...
茶點故事閱讀 47,762評論 2贊 372

三个男躁一个女,国精产品一区一手机的秘密,麦子交换系列最经典十句话,欧美国产综合欧美视频

[React-Native]react-navigation 使用

[React-Native]react-navigation 使用

一、開源庫介紹

二、react-navigation使用

1、StackNavigator屬性介紹

3、DrawerNavigator屬性介紹

（2）HomeScreen界面和MineScreen界面：

2、擴展功能

（1）默認DrawerView不可滾動。要實現可滾動視圖，必須使用contentComponent自定義容器，如下所示：

（2）可以覆蓋導航使用的默認組件，使用DrawerItems自定義導航組件：

（3）動態設置頭部按鈕事件：

五、效果圖

推薦閱讀更多精彩內容

三个男躁一个女,国精产品一区一手机的秘密,麦子交换系列最经典十句话,欧美 国产 综合 欧美 视频

[React-Native]react-navigation 使用

一、開源庫介紹

二、react-navigation使用

1、StackNavigator屬性介紹

3、DrawerNavigator屬性介紹

（2）HomeScreen界面和MineScreen界面：

2、擴展功能

（1）默認DrawerView不可滾動。要實現可滾動視圖，必須使用contentComponent自定義容器，如下所示：

（2）可以覆蓋導航使用的默認組件，使用DrawerItems自定義導航組件：

（3）動態設置頭部按鈕事件：

五、效果圖

推薦閱讀更多精彩內容

三个男躁一个女,国精产品一区一手机的秘密,麦子交换系列最经典十句话,欧美国产综合欧美视频