本文是基于最新的react-navigation^2.9.1來書寫的。

要感謝掛著鈴鐺的兔
看到一篇不錯(cuò)的介紹,這里做下記錄

react-native-router-flux使用技巧（API篇）

識兔，一款用來識別圖片的開源項(xiàng)目，在未來還會(huì)添加更多有意思的東西

react-navigation的Demo

react-navigation使用技巧(進(jìn)階篇)

什么是react-navigation?

react-native從開源至今，一直存在幾個(gè)無法解決的毛病，偶爾就會(huì)復(fù)發(fā)讓人隱隱作痛，提醒你用的不是原生，其中包括列表的復(fù)用問題，導(dǎo)航跳轉(zhuǎn)不流暢的問題等等。
終于facebook坐不住了，在前一段時(shí)間開始推薦使用react-navigation，并且在0.44發(fā)布的時(shí)將之前一直存在的Navigator廢棄了。
react-navigation是致力于解決導(dǎo)航卡頓，數(shù)據(jù)傳遞，Tabbar和navigator布局，支持redux。雖然現(xiàn)在功能還不完善，但基本是可以在項(xiàng)目中推薦使用的。

屬性

react-navigation分為三個(gè)部分。
StackNavigator類似頂部導(dǎo)航條，用來跳轉(zhuǎn)頁面和傳遞參數(shù)。
TabNavigator類似底部標(biāo)簽欄，用來區(qū)分模塊。
DrawerNavigator抽屜，類似從App左側(cè)滑出一個(gè)頁面，在這里不做講解。
下面會(huì)分開講解官網(wǎng)提供的配置方法，但順序可能會(huì)官網(wǎng)不一樣。

React-Navigation V2版使用教程

距離我上一個(gè)版本的react-navigation教程已經(jīng)有1年多的時(shí)間了，雖然一直在縫縫補(bǔ)補(bǔ)，但那個(gè)教程真的老了。正好react-navigation V2版本也即將要正式發(fā)布了，趁著這次機(jī)會(huì)重新梳理一下教程，并把之前的坑和遺憾填補(bǔ)一下。

我會(huì)將本文分成三部分，第一部分是使用小技巧，第二部分是介紹API，第三部分是常用屬性方法。

跳轉(zhuǎn)

navigate('Detail',{
                   title:'圖片詳情',
                   url:item.url,
                   });

Detail：在StackNavigator中注冊的頁面，需要一一對應(yīng)，才能跳轉(zhuǎn)到相應(yīng)的頁面
title：在跳轉(zhuǎn)的頁面可以通過this.props.navigation.state.params.title獲取到這個(gè)參數(shù)。當(dāng)然這個(gè)參數(shù)可以隨便填寫，都可以通過this.props.navigation.state.params.xxx獲取。

回調(diào)傳參

navigate('Detail',{
                   // 跳轉(zhuǎn)的時(shí)候攜帶一個(gè)參數(shù)去下個(gè)頁面
                   callback: (data)=>{
                         console.log(data); // 打印值為：'回調(diào)參數(shù)'
                     }
                   });

const {navigate,goBack,state} = this.props.navigation;
// 在第二個(gè)頁面,在goBack之前,將上個(gè)頁面的方法取到,并回傳參數(shù),這樣回傳的參數(shù)會(huì)重走render方法
state.params.callback('回調(diào)參數(shù)');
goBack();

自定義

項(xiàng)目中基本是沒可能用自帶的那個(gè)導(dǎo)航條的，自帶導(dǎo)航條左側(cè)的按鈕永遠(yuǎn)是藍(lán)色的，如果我們需要更改按鈕顏色，就需要用到自定義的功能了。

const StackOptions = ({navigation}) => {
    console.log(navigation);
    let {state,goBack} = navigation;

    // 用來判斷是否隱藏或顯示header
    const visible= state.params.isVisible;
    let header;
    if (visible === true){
        header = null;
    }
    const headerStyle = {backgroundColor:'#4ECBFC'};
    const headerTitle = state.params.title;
    const headerTitleStyle = {fontSize:FONT_SIZE(20),color:'white',fontWeight:'500'}
    const headerBackTitle = false;
    const headerLeft = (
        <Button
            isCustom={true}
            customView={
                            <Icon
                                name='ios-arrow-back'
                                size={30}
                                color='white'
                                style={{marginLeft:13}}
                            />
                        }
            onPress={()=>{goBack()}}
        />
    );
    return {headerStyle,headerTitle,headerTitleStyle,headerBackTitle,headerLeft,header}
};

然后通過下面的方法調(diào)用就可以自定制導(dǎo)航了。

const MyApp = StackNavigator({
    MyTab: {
        screen: MyTab,
    },
    Detail: {
        screen: Detail,
        navigationOptions: ({navigation}) => StackOptions({navigation})
    },
)};

在頁面中使用的時(shí)候，在跳轉(zhuǎn)頁面的時(shí)候需要傳遞title參數(shù)，才能看到效果哦。

自定義tabbar

早上有人問我，tabbar的圖標(biāo)可不可以使用原圖，選中狀態(tài)下可不可以設(shè)置其他圖標(biāo)。研究了一下官方文檔，發(fā)現(xiàn)tabBarIcon除了tintColor還有另一個(gè)屬性，用來判斷選中狀態(tài)的focused。

 tabBarIcon: ({tintColor,focused}) => (
                focused
                    ?
                    <Image
                        source={{uri : '識兔'}}
                        style={tabBarIcon}
                    />
                    :
                    <Image
                        source={{uri : '干貨'}}
                        style={[tabBarIcon, {tintColor: tintColor}]}
                    />
            ),

通過判斷focused，選中狀態(tài)下使用識兔圖標(biāo)，未選中狀態(tài)使用干貨圖標(biāo)。
如果想使用圖標(biāo)原來的樣子，那就將style的tintColor去掉，這樣就會(huì)顯示圖標(biāo)原本的顏色。

再封裝

export const TabOptions = (tabBarTitle,normalImage,selectedImage,navTitle) => {
    // console.log(navigation);
    const tabBarLabel = tabBarTitle;
    console.log(navTitle);
    const tabBarIcon = (({tintColor,focused})=> {
        return(
            focused
                ?
                <Image
                    source={{uri : normalImage}}
                    style={[TabBarIcon, {tintColor: tintColor}]}
                />
                :
                <Image
                    source={{uri : selectedImage}}
                    style={[TabBarIcon, {tintColor: tintColor}]}
                />
        )
    });
    const headerTitle = navTitle;
    const headerTitleStyle = {fontSize:FONT_SIZE(20),color:'white'};
    // header的style
    const headerStyle = {backgroundColor:'#4ECBFC'};
    return {tabBarLabel,tabBarIcon,headerTitle,headerTitleStyle,headerStyle};
};

在static中使用this方法

我之前文章中是將navaigationOptions的方法寫在了app.js中，沒有在頁面中通過static navaigationOptions來初始化頁面，這段時(shí)間剛好有人問，所以在這里就寫一下該怎么弄。

首先需要在componentDidMount(){}中動(dòng)態(tài)的添加點(diǎn)擊事件

屬性給params
componentDidMount(){

    this.props.navigation.setParams({
        title:'自定義Header',
        navigatePress:this.navigatePress
    })
}

navigatePress = () => {
    alert('點(diǎn)擊headerRight');
    console.log(this.props.navigation);
}

接下來就可以通過params方法來獲取點(diǎn)擊事件了

static navigationOptions = ({ navigation, screenProps }) => ({
        title: navigation.state.params?navigation.state.params.title:null,
        headerRight:(
            <Text onPress={navigation.state.params?navigation.state.params.navigatePress:null}>
                返回
            </Text>
        )
});

讓安卓實(shí)現(xiàn)push動(dòng)畫

之前我群里的討論怎么讓安卓實(shí)現(xiàn)類似iOS的push動(dòng)畫，后來翻看官方issues的時(shí)候，真的發(fā)現(xiàn)了實(shí)現(xiàn)push動(dòng)畫的代碼，在這里共享下

// 先引入這個(gè)方法
import CardStackStyleInterpolator from 'react-navigation/src/views/CardStackStyleInterpolator';

// 在StackNavigator配置headerMode的地方，使用transitionConfig添加
{
    headerMode: 'screen',
    transitionConfig:()=>({
        screenInterpolator:CardStackStyleInterpolator.forHorizontal,
    })
}

關(guān)于goBack返回指定頁面

react-navigation是提供了goBack()到指定頁面的方法的，那就是在goBack()中添加一個(gè)參數(shù)，但當(dāng)你使用goBack('Main')的時(shí)候，你會(huì)發(fā)現(xiàn)并沒有跳轉(zhuǎn)，原因是react-navigation默認(rèn)goBack()中的參數(shù)是系統(tǒng)隨機(jī)分配的key，而不是手動(dòng)設(shè)置的routeName，而方法內(nèi)部又沒有提供可以獲得key的方法，所以這里只能通過修改源碼將key換成routeName了。
下面的內(nèi)容直接引用了hello老文的內(nèi)容

把項(xiàng)目/node_modules/react-navigation/src/routers/StackRouter.js文件里的 
const backRoute = state.routes.find((route: *) => route.key === action.key); 
改成 const backRoute = state.routes.find(route => route.routeName === action.key);

但不是很完美, 這里的component要填想返回的組件的前一個(gè)組件的routeName, 比如你的棧里順序是home1, home2, home3, home4, 在home4里要返回home2, 使用this.props.navigation.goBack('home3');; 并且又會(huì)帶出一個(gè)問題: goBack()方法沒反應(yīng)了, 必須加個(gè)null進(jìn)去, 寫成goBack(null)...

關(guān)于goBack返回指定頁面的修改完善版

if (action.type === NavigationActions.BACK) {
    let backRouteIndex = null;
    if (action.key) {

      const backRoute = state.routes.find(
        /* $FlowFixMe */
        /* 修改源碼 */
        route => route.routeName === action.key
        /* (route: *) => route.key === action.key */
      );
      /* $FlowFixMe */
      console.log('backRoute =====',backRoute);
      backRouteIndex = state.routes.indexOf(backRoute);
      console.log('backRoute =====',backRouteIndex);
    }
    if (backRouteIndex == null) {
      return StateUtils.pop(state);
    }
    if (backRouteIndex >= 0) {
      return {
        ...state,
        routes: state.routes.slice(0, backRouteIndex+1),
        index: backRouteIndex - 1 + 1,
      };
    }
  }

感謝群友conan的貢獻(xiàn)，將源碼改成上面的樣子，就可以使用goBack()返回指定頁面了，這樣的優(yōu)點(diǎn)不言而喻，但缺點(diǎn)就是每次調(diào)用goBack()，如果只是簡單的返回上一頁需要加上null參數(shù)，類似這樣goBack(null)，

如果這樣修改，在滑動(dòng)返回的時(shí)候，會(huì)有很大幾率讓項(xiàng)目卡死，請注意使用該方法，推薦集成redux。

關(guān)于快速點(diǎn)擊會(huì)導(dǎo)致多次跳轉(zhuǎn)的問題解決辦法

感謝群友編程大叔的貢獻(xiàn)，如果想解決快速點(diǎn)擊跳轉(zhuǎn)的問題，需要修改部分源碼。

修改react-navigation目錄下，scr文件夾中的addNavigationHelpers.js文件，可以直接替換成下面的文本，也可以查看原版鏈接

 export default function<S: *>(navigation: NavigationProp<S, NavigationAction>) {
  // 添加點(diǎn)擊判斷
  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,
        }),
      ),
  };
}

安卓上，使用TextInput的時(shí)候會(huì)讓TabBar頂起來的解決辦法

最簡單的解決辦法就是在android目錄中，添加一句話

目錄：android/app/src/main/AndroidManifest.xml中，添加

 android:windowSoftInputMode="stateAlwaysHidden|adjustPan|adjustResize"

ps：在iOS下如果想一勞永逸的解決鍵盤問題，請使用IQKeyBoardManager。

API

createSwitchNavigator

SwitchNavigator的目的是一次只顯示一個(gè)屏幕。默認(rèn)情況下，它不處理回退操作，并在您切換時(shí)將路由重置為默認(rèn)狀態(tài)。這是我們從登錄流程（包含注冊，登錄，忘記密碼等）到主屏幕的必要流程。

這個(gè)方法在1.x中叫做SwitchNavigator，在2.x中統(tǒng)一命名為createSwitchNavigator

createSwitchNavigator(RouteConfigs, SwitchNavigatorConfig);

RouteConfigs

路由的配置表，詳細(xì)配置可以參考下面的createStackNavigator

SwitchNavigatorConfig

SwitchNavigator屬性

• initialRouteName - 第一次加載時(shí)初始選項(xiàng)卡路由的routeName。
• resetOnBlur - 切換離開屏幕時(shí)，重置所有嵌套導(dǎo)航器的狀態(tài)。默認(rèn)為true。
• paths - 提供routeName到path的深度鏈接，它會(huì)覆蓋RouteConfigs中設(shè)置的路徑。
• backBehavior - 后退按鈕是否會(huì)導(dǎo)致標(biāo)簽切換到初始路由？如果是，則設(shè)置為initialRoute，否則none。默認(rèn)為none。

export default createSwitchNavigator(
  {
    AuthLoading: AuthLoadingScreen,
    App: AppStack,
    Auth: AuthStack,
  },
  {
    initialRouteName: 'AuthLoading',
  }
);

createStackNavigator

配置路由屬性和參數(shù)

這個(gè)方法在1.x中叫做StackNavigator，在2.x中統(tǒng)一命名為createSwitchNavigator

createStackNavigator(RouteConfigs, StackNavigatorConfig);

RouteConfigs

• screen - 對應(yīng)界面名稱，是一個(gè)React組件
• path - 深度鏈接路徑，從其他App或者web跳轉(zhuǎn)到該App需要設(shè)置該路徑
• navigationOptions - 用于屏幕的默認(rèn)導(dǎo)航選項(xiàng)

StackNavigatorConfig

可選的路由屬性

• initialRouteName - 設(shè)置默認(rèn)屏幕。必須為路由配置中的某個(gè)screen。
• initialRouteParams - 初始路由路線的參數(shù)。
• navigationOptions - 用于屏幕的默認(rèn)導(dǎo)航選項(xiàng)。
• paths - 覆蓋路由配置中設(shè)置的路徑的映射。

可選的視覺選項(xiàng)

• mode - 定義渲染和轉(zhuǎn)換的樣式

  • card - 使用標(biāo)準(zhǔn)的iOS和Android屏幕轉(zhuǎn)換。這是默認(rèn)屬性。
  • modal - 使屏幕從底部滑入，這是一種常見的iOS模式。只適用于iOS，對Android沒有影響。

• headerMode - 定義如何呈現(xiàn)標(biāo)題

  • float - 在屏幕更改時(shí)渲染保留在頂部的單個(gè)標(biāo)題和動(dòng)畫。這是iOS上的常見效果。
  • screen - 每個(gè)屏幕都附有一個(gè)標(biāo)題，標(biāo)題與屏幕一起淡入和淡出。這是Android上的常見效果。
  • none - 不會(huì)顯示標(biāo)題。

• headerTransitionPreset - 指定標(biāo)題在headerMode: float啟用時(shí)應(yīng)該如何從一個(gè)屏幕切換到另一個(gè)屏幕。

  • fade-in-place - 標(biāo)題組件在不移動(dòng)的情況下淡入淡出，類似于iOS的Twitter，Instagram和Facebook應(yīng)用程序。這是默認(rèn)值。
  • uikit - iOS的默認(rèn)效果。

• cardStyle - 使用此道具覆蓋或擴(kuò)展堆棧中單個(gè)卡的默認(rèn)樣式。

• transitionConfig - 函數(shù)返回與默認(rèn)屏幕轉(zhuǎn)換合并的對象（查看類型定義中的TransitionConfig ）。提供的函數(shù)將傳遞以下參數(shù)：

  • transitionProps - 新屏幕的過渡轉(zhuǎn)換。
  • prevTransitionProps - 舊屏幕的過渡轉(zhuǎn)換。
  • isModal - 指定屏幕是否為模態(tài)。

• onTransitionStart - 跳轉(zhuǎn)動(dòng)畫即將開始時(shí)要調(diào)用的函數(shù)。

• onTransitionEnd - 跳轉(zhuǎn)動(dòng)畫完成后調(diào)用的函數(shù)。

navigationOptions

導(dǎo)航頁面的屬性和方法

• title - 可用作的headerBackTitle的標(biāo)題。此外，將用作tabBarLabel（如果嵌套在TabNavigator中）或drawerLabel（如果嵌套在DrawerNavigator中）的回退標(biāo)題。

• header - 返回一個(gè)React元素，用來作為標(biāo)題。設(shè)置null會(huì)隱藏標(biāo)題。

• headerTitle - 可以傳入字符串，React Element，React Component。默認(rèn)是用上面的title作為標(biāo)題。當(dāng)使用Component時(shí)，它接受allowFontScaling，style和children作為屬性。title會(huì)被放在children中。

• headerTitleAllowFontScaling - 標(biāo)題字體是否應(yīng)該縮放以遵循系統(tǒng)設(shè)置。默認(rèn)值為true。

• headerBackImage - 接受React Element或者Component用來顯示自定義的后退按鈕中的圖片。當(dāng)使用組件時(shí)，它會(huì)得到(tintColor，title)參數(shù)。默認(rèn)為react-navigation/views/assets/back-icon.png路徑下的圖片，這是區(qū)分平臺的默認(rèn)圖標(biāo)。

• headerBackTitle - iOS上后退按鈕使用的文字，傳遞null會(huì)禁用標(biāo)簽。默認(rèn)為前一場景headerTitle。

• headerTruncatedBackTitle - 當(dāng)后退按鈕使用的標(biāo)題字符串headerBackTitle不適合屏幕時(shí)(比如說文字過長)，會(huì)默認(rèn)顯示Back。

• headerRight - 接受React Element將會(huì)顯示在標(biāo)題的右側(cè)。

• headerLeft - 接受React Element或者React Component將會(huì)顯示在標(biāo)題的左側(cè)。當(dāng)傳遞一個(gè)組件的時(shí)候，會(huì)得到（onPress，title，titleStyle還有更多，請參考Header.js以獲得完整的列表）。

• headerStyle - 標(biāo)題的樣式

• headerForceInset - 允許將forceInset對象傳遞給標(biāo)題中，使用的內(nèi)部SafeAreaView。

• headerTitleStyle - 標(biāo)題組件的樣式

• headerBackTitleStyle - 標(biāo)題上后退按鈕文字樣式

• headerTintColor - 標(biāo)題組件的色調(diào)

• headerPressColorAndroid - 材質(zhì)紋波的顏色（僅限Android> = 5.0）

• headerTransparent - 默認(rèn)為false。如果為true標(biāo)題將沒有背景，除非你明確提供了headerStyle或headerBackground。

• headerBackground - 將此與headerTransparent一起使用，以提供一個(gè)組件在標(biāo)題的背景中呈現(xiàn)。例如，您可以將其用于模糊視圖，以創(chuàng)建半透明標(biāo)題。

• gesturesEnabled - 是否可以使用手勢來返回到上一頁。在iOS上默認(rèn)為true，在Android上為false。

• gestureResponseDistance - 用于覆蓋觸摸從屏幕邊緣開始識別手勢的距離的對象。它具有以下屬性：

  • horizontal - number - 水平方向的距離。默認(rèn)為25。
  • vertical - number - 垂直方向的距離。默認(rèn)為135。

• gestureDirection - 傳遞字符串用來覆蓋關(guān)閉手勢的方向。default為正常行為或inverted從右到左滑動(dòng)。

Navigator Props

由StackNavigator（...）創(chuàng)建的導(dǎo)航器組件采用以下道具：

• screenProps - 將其他選項(xiàng)傳遞給子屏幕

createTabNavigator

createTabNavigator已棄用。請改用createBottomTabNavigator和/或createMaterialTopTabNavigator。

createBottomTabNavigator

屏幕底部的簡單標(biāo)簽欄，可讓您在不同路由之間切換。路由是被懶惰初始化的 - 它們的屏幕組件直到第一次選中時(shí)才會(huì)初始化。

這個(gè)方法在1.x中叫做TabNavigator，在2.x中統(tǒng)一命名為createBottomTabNavigator

createBottomTabNavigator(RouteConfigs, BottomTabNavigatorConfig);

RouteConfigs

屬性請參考createStackNavigator。
它的navigationOptions和createStackNavigator不一樣，下面會(huì)有說明。

BottomTabNavigatorConfig

• initialRouteName - 第一次加載時(shí)初始選項(xiàng)卡路由的routeName。

• order - 定義選項(xiàng)卡順序的routeNames數(shù)組。

• paths - 提供routeName到path的深度鏈接，它會(huì)覆蓋RouteConfigs中設(shè)置的路徑。

• backBehavior - 后退按鈕是否會(huì)導(dǎo)致標(biāo)簽切換到初始路由？如果是，則設(shè)置為initialRoute，否則none。默認(rèn)為initialRoute。

• tabBarComponent - Options，覆蓋用作標(biāo)簽欄的組件。

• tabBarOptions - 標(biāo)簽欄具有如下屬性：

  • activeTintColor - 活動(dòng)選項(xiàng)卡的標(biāo)簽和圖標(biāo)顏色。(選中)
  • activeBackgroundColor - 活動(dòng)選項(xiàng)卡的背景顏色。(選中)
  • inactiveTintColor - 非活動(dòng)選項(xiàng)卡的標(biāo)簽和圖標(biāo)顏色。(未選中)
  • inactiveBackgroundColor - 非活動(dòng)選項(xiàng)卡的背景顏色。(未選中)
  • showLabel - 是否顯示標(biāo)簽，默認(rèn)為true。
  • style - 標(biāo)簽欄的樣式。
  • labelStyle - 標(biāo)簽欄文字的樣式。
  • tabStyle - 選項(xiàng)卡的樣式。
  • allowFontScaling - 標(biāo)題字體是否應(yīng)該縮放以遵循系統(tǒng)設(shè)置。默認(rèn)值為true。

navigationOptions

標(biāo)簽欄的屬性和方法

• title - 通用標(biāo)題可以用作headerTitle和tabBarLabel。

• tabBarVisible - 顯示或隱藏底部標(biāo)簽欄，默認(rèn)為true，不隱藏。

• tabBarIcon - React Element或給定{focused：boolean，tintColor：string}的函數(shù)返回一個(gè)React.Node，用來顯示在標(biāo)簽欄中。

• tabBarLabel - 接收字符串、React Element或者給定{focused：boolean，tintColor：string}的函數(shù)返回一個(gè)React.Node，用來顯示在標(biāo)簽欄中。如果未定義，會(huì)使用title作為默認(rèn)值。如果想要隱藏，可以參考上面的tabBarOptions.showLabel。

• tabBarOnPress - 標(biāo)簽欄點(diǎn)擊事件回調(diào)，接受一個(gè)對象，其中包含如下：

[圖片上傳失敗...(image-d10d-1535967589937)]

tabBarOnPress: async (obj: any) => {
            console.log(obj);
            try {
                const userData = await AsyncStorage.getItem('USER_INFO');
                if (userData) {
                    obj.defaultHandler();
                }
                else {
                    obj.navigation.navigate('Login');
                }
            } catch (e) {
                Toast.show(e.message, 'center', 1000);
            }
        }

createMaterialTopTabNavigator

實(shí)現(xiàn)了類似react-native-scrollable-tab-view的左右滾動(dòng)效果，但每個(gè)tab頁是沒有懶加載的，就是說，當(dāng)使用這個(gè)生成導(dǎo)航的時(shí)候，每個(gè)頁面都會(huì)初始化，對內(nèi)存影響較大。
這個(gè)導(dǎo)航是基于react-native-tab-view實(shí)現(xiàn)的，如果有需要可以研究。

createMaterialTopTabNavigator(RouteConfigs, TabNavigatorConfig);

RouteConfigs

屬性請參考createStackNavigator。

TabNavigatorConfig

• initialRouteName - 第一次加載時(shí)初始選項(xiàng)卡路由的routeName。

• order - 定義選項(xiàng)卡順序的routeNames數(shù)組。

• paths - 提供routeName到path的深度鏈接，它會(huì)覆蓋RouteConfigs中設(shè)置的路徑。

• backBehavior - 后退按鈕是否會(huì)導(dǎo)致標(biāo)簽切換到初始路由？如果是，則設(shè)置為initialRoute，否則none。默認(rèn)為initialRoute。

• swipeEnabled - 是否允許在標(biāo)簽之間滑動(dòng)。

• animationEnabled - 改變標(biāo)簽時(shí)是否使用動(dòng)畫。

• configureTransition - 給定currentTransitionProps和nextTransitionProps返回一個(gè)描述選項(xiàng)卡之間動(dòng)畫的配置對象的函數(shù)。

• initialLayout - 包含初始height和可選對象width，可以傳遞以防止react-native-tab-view出現(xiàn)一幀的延遲。

• tabBarComponent - Options，覆蓋用作標(biāo)簽欄的組件。

• tabBarOptions - 標(biāo)簽欄具有如下屬性：

  • activeTintColor - 活動(dòng)選項(xiàng)卡的標(biāo)簽和圖標(biāo)顏色。(選中)
  • inactiveTintColor - 非活動(dòng)選項(xiàng)卡的標(biāo)簽和圖標(biāo)顏色。(未選中)
  • showIcon - 是否顯示標(biāo)簽圖標(biāo)，默認(rèn)為false。
  • showLabel - 是否顯示標(biāo)簽，默認(rèn)為true。
  • upperCaseLabel - 是否使標(biāo)簽大寫，默認(rèn)為true。
  • pressColor - 紋波的顏色（僅限Android> = 5.0）。
  • pressOpacity - 按下標(biāo)簽的不透明度（僅iOS和Android <5.0）。
  • scrollEnabled - 是否啟用可滾動(dòng)標(biāo)簽。
  • tabStyle - 選項(xiàng)卡的樣式。
  • indicatorStyle - 選項(xiàng)卡指示符的樣式（選項(xiàng)卡底部線的顏色）。
  • labelStyle - 標(biāo)簽欄文字的樣式。
  • iconStyle - 選項(xiàng)卡圖標(biāo)的樣式。
  • style - 標(biāo)簽欄的樣式。
  • allowFontScaling - 標(biāo)題字體是否應(yīng)該縮放以遵循系統(tǒng)設(shè)置。默認(rèn)值為true。

navigationOptions

• title - 通用標(biāo)題可以用作headerTitle和tabBarLabel。
• swipeEnabled - 如果未設(shè)置，則遵循TabNavigatorConfig選項(xiàng)swipeEnabled。啟用或禁用標(biāo)簽之間的滑動(dòng)操作為true或false。
• tabBarIcon - React Element或給定{focused：boolean，tintColor：string}的函數(shù)返回一個(gè)React.Node，用來顯示在標(biāo)簽欄中。
• tabBarLabel - 接收字符串、React Element或者給定{focused：boolean，tintColor：string}的函數(shù)返回一個(gè)React.Node，用來顯示在標(biāo)簽欄中。如果未定義，會(huì)使用title作為默認(rèn)值。如果想要隱藏，可以參考上面的tabBarOptions.showLabel。
• tabBarOnPress - 標(biāo)簽欄點(diǎn)擊事件回調(diào)，接受一個(gè)對象，其中包含如下：

[圖片上傳失敗...(image-8865d7-1535967589937)]

tabBarOnPress: async (obj: any) => {
            console.log(obj);
            try {
                const userData = await AsyncStorage.getItem('USER_INFO');
                if (userData) {
                    obj.defaultHandler();
                }
                else {
                    obj.navigation.navigate('Login');
                }
            } catch (e) {
                Toast.show(e.message, 'center', 1000);
            }
        }

createDrawerNavigator

創(chuàng)建側(cè)邊欄導(dǎo)航，有一些坑，需要用過才知道。

createDrawerNavigator(RouteConfigs, DrawerNavigatorConfig)

RouteConfigs

屬性請參考createStackNavigator。

DrawerNavigatorConfig

• drawerWidth - 抽屜的寬度或返回一個(gè)新的函數(shù)。

• drawerPosition - 抽屜出現(xiàn)的方向left或right，默認(rèn)left。

• contentComponent - 用于呈現(xiàn)抽屜內(nèi)容的組件，例如導(dǎo)航項(xiàng)。接收navigation抽屜的屬性。默認(rèn)為DrawerItems。有關(guān)更多信息，請參見下文。

• contentOptions - 配置抽屜內(nèi)容，請參見下文。

• useNativeAnimations - 啟用本地動(dòng)畫。默認(rèn)是true。

• drawerBackgroundColor - 設(shè)置抽屜的背景背景。默認(rèn)是white。

• initialRouteName - 第一次加載時(shí)初始選項(xiàng)卡路由的routeName。

• order - 定義選項(xiàng)卡順序的routeNames數(shù)組。

• paths - 提供routeName到path的深度鏈接，它會(huì)覆蓋RouteConfigs中設(shè)置的路徑。

• backBehavior - 后退按鈕是否會(huì)導(dǎo)致標(biāo)簽切換到初始路由？如果是，則設(shè)置為initialRoute，否則none。默認(rèn)為initialRoute。

contentComponent

提供自定義的抽屜效果
抽屜的默認(rèn)組件是可滾動(dòng)的，只包含RouteConfig中路由的鏈接。您可以輕松地覆蓋默認(rèn)組件，以向抽屜中添加頁眉，頁腳或其他內(nèi)容。默認(rèn)情況下，抽屜可滾動(dòng)并支持iPhone X安全區(qū)域。如果您自定義內(nèi)容，請務(wù)必將內(nèi)容包裝在SafeAreaView中

DrawerItems的contentOptions

• items - 路由數(shù)組，可以修改或覆蓋。

• activeItemKey - 識別活動(dòng)路線的key。

• activeTintColor - 活動(dòng)標(biāo)簽的標(biāo)簽和圖標(biāo)顏色。(選中)

• activeBackgroundColor - 活動(dòng)標(biāo)簽的背景顏色。(選中)

• inactiveTintColor - 不活動(dòng)標(biāo)簽的標(biāo)簽和圖標(biāo)顏色。(未選中)

• inactiveBackgroundColor - 不活動(dòng)標(biāo)簽的背景顏色。(未選中)

• onItemPress(route) - 按下某個(gè)Item時(shí)調(diào)用的函數(shù)。

• itemsContainerStyle - item內(nèi)容的樣式。

• itemStyle - 單個(gè)Item樣式，其中可以包含圖標(biāo)和標(biāo)簽。

• labelStyle - 當(dāng)標(biāo)簽是字符串時(shí)，會(huì)覆蓋文字的樣式。

• activeLabelStyle - 當(dāng)標(biāo)簽是字符串時(shí)，會(huì)覆蓋選中的文字樣式。

• inactiveLabelStyle - 當(dāng)標(biāo)簽是字符串時(shí)，會(huì)覆蓋未選中的文字樣式。

• iconContainerStyle - 用來覆蓋icon的樣式

Screen Navigation Options

• title - 通用標(biāo)題可以用作headerTitle和tabBarLabel。

• drawerLabel - 可以傳入字符串，React Element或給定{focused：boolean，tintColor：string}的函數(shù)返回一個(gè)React.Node，用來顯示在抽屜邊欄中。當(dāng)不設(shè)置時(shí)，默認(rèn)使用title。

• drawerIcon - React Element或給定{focused：boolean，tintColor：string}的函數(shù)返回一個(gè)React.Node，用來顯示在抽屜邊欄中。

• drawerLockMode - 指定抽屜的鎖定模式。這也可以通過在頂級路由器上使用screenProps.drawerLockMode動(dòng)態(tài)更新。

enum('unlocked', 'locked-closed', 'locked-open')

createMaterialBottomTabNavigator

這個(gè)方法在2.0正式版中被砍掉了，但官方文檔沒有更新，如果喜歡material風(fēng)格，可以參考react-native-material-bottom-navigation

常用屬性方法

這部分會(huì)分為createStackNavigator和createDrawerNavigator兩部分，因?yàn)樗鼈儗傩圆惶粯印?/p>

createStackNavigator

常用方法

[圖片上傳失敗...(image-c747f-1535967589936)]

在新版的react-navigation中實(shí)現(xiàn)了很多常用的api，比如說push，pop，popToTop等常用方法，在本文中會(huì)將屬性和使用方法簡單說明。

NavigationActions

• Navigate - 用來跳轉(zhuǎn)到其他路由的方法
  • routeName - String - 必須 - 在RouteConfigs中注冊過的路由名稱
  • params - Object - 可選 - 傳遞的參數(shù)
  • action - Object - 可選 - （高級）如果屏幕是導(dǎo)航器，則在子路由器中運(yùn)行的子操作。本文檔中描述的任何一項(xiàng)操作都可以設(shè)置為子操作。
  • key - String - 可選 - 要導(dǎo)航到的路線的標(biāo)識符。如果它已經(jīng)存在，則返回到此路線。

import { NavigationActions } from 'react-navigation';
const navigateAction = NavigationActions.navigate({
  routeName: 'Profile',
  params: {},
  action: NavigationActions.navigate({ routeName: 'SubProfileRoute' }),
});
this.props.navigation.dispatch(navigateAction);

• Back - 用來返回到上一個(gè)路由或其他路由

  • Key - String | null - 如果設(shè)置，導(dǎo)航將從給定的鍵返回。如果為空，導(dǎo)航將返回到上一級。

import { NavigationActions } from 'react-navigation';
const backAction = NavigationActions.back({
  key: 'Profile',
});
this.props.navigation.dispatch(backAction);

• SetParams

在調(diào)用SetParams時(shí)，路由器將產(chǎn)生一個(gè)新的狀態(tài)，該狀態(tài)已經(jīng)改變了由key標(biāo)識的特定路由參數(shù)

* `params` - Object - 可選 - 新的參數(shù)被合并到現(xiàn)有的路徑參數(shù)中。
* `key` - String - 必須 - 獲取新參數(shù)的路由鍵。

import { NavigationActions } from 'react-navigation';

const setParamsAction = NavigationActions.setParams({
  params: { title: 'Hello' },
  key: 'screen-123',
});
this.props.navigation.dispatch(setParamsAction);

• Reset - 重置路由

Reset操作將重置整個(gè)導(dǎo)航狀態(tài)并將其替換為新的導(dǎo)航。

* `index` - number - 必須 - 導(dǎo)航中`routes`活動(dòng)路由的索引`state`。

* `actions` - array - 必須 - 將替換導(dǎo)航數(shù)組。
* `key` - string | null - 可選 - 如果設(shè)置，具有給定鍵的導(dǎo)航器將重置。如果為null，則根導(dǎo)航器將被重置。

import { StackActions, NavigationActions } from 'react-navigation';
const resetAction = StackActions.reset({
  index: 0,
  actions: [NavigationActions.navigate({ routeName: 'Profile' })],
});
this.props.navigation.dispatch(resetAction);

• Replace - 用新的route替換當(dāng)前的route

Replace操作將給定key上的路線替換為另一條路線。

* `key` - string - 必須 - 要替換??路由的`key`。

* `newKey` - string - 用于替換路由的`key`。如果未提供，則自動(dòng)生成。
* `routeName` - string - 用于替換路由的`routeName`。
* `params` - object - 要傳入替換路由的參數(shù)。
* `action` - object - 可選的子操作。

• Push - 入棧

Push操作會(huì)在堆棧頂部添加一條路徑并向前導(dǎo)航。這與之前的不同之處在于，如果某個(gè)組件已經(jīng)存在路由中，navigate則會(huì)彈出到堆棧中的較早版本。Push將始終添加在頂部，因此可以多次安裝組件。

* `routeName` - string - 要跳轉(zhuǎn)路由的`routeName`。

* `params` - object - 傳遞的參數(shù)，可以通過(this.props.navigation.state.params)找到。
* `action` - 子操作。

• pop(n) - 出棧

Pop操作將使您回到堆棧中的前一個(gè)屏幕。n參數(shù)允許您指定要多少個(gè)屏幕出棧。

* `n` - number - 要出棧的屏幕數(shù)量。

• PopToTop - 回到棧頂

PopToTop操作會(huì)將您帶回堆棧中的第一個(gè)屏幕，解除所有其他屏幕。它的功能與StackActions.pop({n: currentIndex})類似。

----------------------------------------------新老版本的分割線--------------------------------------------------------

screenProps

之前是沒有介紹這個(gè)屬性的，但經(jīng)過這么久發(fā)現(xiàn)，很多人都不知道這個(gè)屬性，不知道它能干嘛，在這里我就簡單的介紹下

screenProps：react-navigation自帶的一個(gè)屬性，屬于navigationOptions的一個(gè)屬性，可以全局控制navigationOptions中的某些值，比如說你想做換膚功能，修改這個(gè)屬性絕對是最簡單的方式。

// 假設(shè)App就是項(xiàng)目中的入口文件，如果還不知道，可以看下Demo，在這里我將主題色通過screenProps屬性修改成'red'
<App screenProps={{themeColor:'red'}}>

// 在頁面中就可以通過screenProps來直接改變了，這個(gè)在Demo
中的Test2里面

static navigationOptions = ({navigation,screenProps}) => ({
        // 這里面的屬性和App.js的navigationOptions是一樣的。
                headerStyle:{backgroundColor:screenProps?
                screenProps.themeColor:
                '#4ECBFC'},

    )
})

StackNavigator 基礎(chǔ)用法/屬性介紹

const MyApp = StackNavigator({
    // 對應(yīng)界面名稱
    MyTab: {
        screen: MyTab,
    },
    Detail: {
        screen: Detail,
        navigationOptions:{
            headerTitle:'詳情',
            headerBackTitle:null,
        }
    },
}, {
    headerMode: 'screen',
});

導(dǎo)航配置

screen：對應(yīng)界面名稱，需要填入import之后的頁面。

navigationOptions：配置StackNavigator的一些屬性。

• title：標(biāo)題，如果設(shè)置了這個(gè)導(dǎo)航欄和標(biāo)簽欄的title就會(huì)變成一樣的，所以不推薦使用這個(gè)方法。
• header：可以設(shè)置一些導(dǎo)航的屬性，當(dāng)然如果想隱藏頂部導(dǎo)航條只要將這個(gè)屬性設(shè)置為null就可以了。
• headerTitle：設(shè)置導(dǎo)航欄標(biāo)題，推薦用這個(gè)方法。
• headerBackTitle：設(shè)置跳轉(zhuǎn)頁面左側(cè)返回箭頭后面的文字，默認(rèn)是上一個(gè)頁面的標(biāo)題?？梢宰远x，也可以設(shè)置為null
• headerTruncatedBackTitle：設(shè)置當(dāng)上個(gè)頁面標(biāo)題不符合返回箭頭后的文字時(shí)，默認(rèn)改成"返回"。（上個(gè)頁面的標(biāo)題過長，導(dǎo)致顯示不下，所以改成了短一些的。）
• headerRight：設(shè)置導(dǎo)航條右側(cè)?？梢允前粹o或者其他。
• headerLeft：設(shè)置導(dǎo)航條左側(cè)?？梢允前粹o或者其他。
• headerStyle：設(shè)置導(dǎo)航條的樣式。背景色，寬高等。如果想去掉安卓導(dǎo)航條底部陰影可以添加elevation: 0，iOS下用shadowOpacity: 0。
• headerTitleStyle：設(shè)置導(dǎo)航條文字樣式。安卓上如果要設(shè)置文字居中，只要添加alignSelf:'center'就可以了。在安卓上會(huì)遇到，如果左邊有返回箭頭導(dǎo)致文字還是沒有居中的問題，最簡單的解決思路就是在右邊也放置一個(gè)空的按鈕。

在最新版本的react-navigation中，安卓居中可以使用 flex:1, textAlign: 'center'來實(shí)現(xiàn)。

• headerBackTitleStyle：設(shè)置導(dǎo)航條返回文字樣式。
• headerTintColor：設(shè)置導(dǎo)航欄文字顏色。總感覺和上面重疊了。
• headerPressColorAndroid：安卓獨(dú)有的設(shè)置顏色紋理，需要安卓版本大于5.0
• gesturesEnabled：是否支持滑動(dòng)返回手勢，iOS默認(rèn)支持，安卓默認(rèn)關(guān)閉
• gestureResponseDistance：對象覆蓋觸摸從屏幕邊緣開始的距離，以識別手勢。 它需要以下屬性：
  • horizontal - number - 水平方向的距離 默認(rèn)為25。
  • vertical - number - 垂直方向的距離 默認(rèn)為135。

// 設(shè)置滑動(dòng)返回的距離
gestureResponseDistance:{horizontal:300},

注：beta13新出的東西，挺有意思，以后可以手動(dòng)控制返回了

導(dǎo)航視覺效果

mode：定義跳轉(zhuǎn)風(fēng)格。

• card：使用iOS和安卓默認(rèn)的風(fēng)格。
• modal：iOS獨(dú)有的使屏幕從底部畫出。類似iOS的present效果

headerMode：邊緣滑動(dòng)返回上級頁面時(shí)動(dòng)畫效果。

• float：iOS默認(rèn)的效果，可以看到一個(gè)明顯的過渡動(dòng)畫。
• screen：滑動(dòng)過程中，整個(gè)頁面都會(huì)返回。
• none：沒有動(dòng)畫。

cardStyle：自定義設(shè)置跳轉(zhuǎn)效果。

transitionConfig： 自定義設(shè)置滑動(dòng)返回的配置。
onTransitionStart：當(dāng)轉(zhuǎn)換動(dòng)畫即將開始時(shí)被調(diào)用的功能。
onTransitionEnd：當(dāng)轉(zhuǎn)換動(dòng)畫完成，將被調(diào)用的功能。

path：路由中設(shè)置的路徑的覆蓋映射配置。
initialRouteName：設(shè)置默認(rèn)的頁面組件，必須是上面已注冊的頁面組件。
initialRouteParams：初始路由的參數(shù)。

path:path屬性適用于其他app或?yàn)g覽器使用url打開本app并進(jìn)入指定頁面。path屬性用于聲明一個(gè)界面路徑，例如：【/pages/Home】。此時(shí)我們可以在手機(jī)瀏覽器中輸入：app名稱://pages/Home來啟動(dòng)該App，并進(jìn)入Home界面。

TabNavigator 基礎(chǔ)用法/屬性介紹

const MyTab = TabNavigator({
    ShiTu: {
        screen: ShiTu,
        navigationOptions:{
            tabBarLabel: '識兔',
            tabBarIcon: ({tintColor}) => (
                <Image
                    source={{uri : '識兔'}}
                    style={[tabBarIcon, {tintColor: tintColor}]}
                />
            ),
        },
    }, {
    tabBarPosition: 'bottom',
    swipeEnabled:false,
    animationEnabled:false,
    tabBarOptions: {
        style: {
            height:49
        },
        activeBackgroundColor:'white',
        activeTintColor:'#4ECBFC',
        inactiveBackgroundColor:'white',
        inactiveTintColor:'#aaa',
        showLabel:false,
    }
});

屏幕導(dǎo)航配置

screen：和導(dǎo)航的功能是一樣的，對應(yīng)界面名稱，可以在其他頁面通過這個(gè)screen傳值和跳轉(zhuǎn)。
navigationOptions：配置TabNavigator的一些屬性

• title：標(biāo)題，會(huì)同時(shí)設(shè)置導(dǎo)航條和標(biāo)簽欄的title，還是不推薦這種方式。
• tabBarVisible：是否隱藏標(biāo)簽欄。默認(rèn)不隱藏(true)
• tabBarIcon：設(shè)置標(biāo)簽欄的圖標(biāo)。需要給每個(gè)都設(shè)置。
• tabBarLabel：設(shè)置標(biāo)簽欄的title。推薦這個(gè)方式。
• tabBarOnPress：設(shè)置tabBar的點(diǎn)擊事件，內(nèi)部提供了兩個(gè)屬性，一個(gè)方法(obj)。
  beta13新添加的方法，使用方式有些奇葩，如果想要使用，請參照下面的代碼

tabBarOnPress:(obj)=>{
            console.log(obj);

            obj.jumpToIndex(obj.scene.index)
        },

標(biāo)簽欄配置

tabBarPosition：設(shè)置tabbar的位置，iOS默認(rèn)在底部，安卓默認(rèn)在頂部。（屬性值：'top'，'bottom'）
swipeEnabled：是否允許在標(biāo)簽之間進(jìn)行滑動(dòng)。
animationEnabled：是否在更改標(biāo)簽時(shí)顯示動(dòng)畫。
lazy：是否根據(jù)需要懶惰呈現(xiàn)標(biāo)簽，而不是提前制作，意思是在app打開的時(shí)候?qū)⒌撞繕?biāo)簽欄全部加載，默認(rèn)false,推薦改成true哦。
initialRouteName： 設(shè)置默認(rèn)的頁面組件
backBehavior：按 back 鍵是否跳轉(zhuǎn)到第一個(gè)Tab(首頁)， none 為不跳轉(zhuǎn)

tabBarOptions：配置標(biāo)簽欄的一些屬性

iOS屬性

• activeTintColor：label和icon的前景色 活躍狀態(tài)下（選中）。
• activeBackgroundColor：label和icon的背景色 活躍狀態(tài)下（選中） 。
• inactiveTintColor：label和icon的前景色 不活躍狀態(tài)下(未選中)。
• inactiveBackgroundColor：label和icon的背景色 不活躍狀態(tài)下（未選中）。
• showLabel：是否顯示label，默認(rèn)開啟。
• style：tabbar的樣式。
• labelStyle：label的樣式。

安卓屬性

• activeTintColor：label和icon的前景色 活躍狀態(tài)下（選中） 。
• inactiveTintColor：label和icon的前景色 不活躍狀態(tài)下(未選中)。
• showIcon：是否顯示圖標(biāo)，默認(rèn)關(guān)閉。
• showLabel：是否顯示label，默認(rèn)開啟。
• style：tabbar的樣式。
• labelStyle：label的樣式。
• upperCaseLabel：是否使標(biāo)簽大寫，默認(rèn)為true。
• pressColor：material漣漪效果的顏色（安卓版本需要大于5.0）。
• pressOpacity：按壓標(biāo)簽的透明度變化（安卓版本需要小于5.0）。
• scrollEnabled：是否啟用可滾動(dòng)選項(xiàng)卡。
• tabStyle：tab的樣式。
• indicatorStyle：標(biāo)簽指示器的樣式對象（選項(xiàng)卡底部的行）。安卓底部會(huì)多出一條線，可以將height設(shè)置為0來暫時(shí)解決這個(gè)問題。
• labelStyle：label的樣式。
• iconStyle：圖標(biāo)的樣式。
  ps：很多人問我,為什么安卓上的tabbar文字會(huì)下移, 是因?yàn)榘沧勘萯OS多了一個(gè)屬性,就是iconStyle,通過設(shè)置labelStyle和iconStyle兩個(gè)樣式,外加style的高度,來使效果更佳合理.