ReactNavigation使用總結

三種Navigator：

1.StackNavigator—通過進出棧的方式進行頁面之間的跳轉

iOS的跳轉方式爲從右邊滑動進入新頁面，android的跳轉方式從底部淡入到新頁面

方法：

StackNavigator(RouteConfigs, StackNavigatorConfig)

例子：

StackNavigator({

  // For each screen that you can navigate to, create a new entry like this:
  Profile: {

    // `ProfileScreen` is a React component that will be the main content of the screen.
    screen: ProfileScreen,
    // When `ProfileScreen` is loaded by the StackNavigator, it will be given a `navigation` prop.

    // Optional: When deep linking or using react-navigation in a web app, this path is used:
    path: 'people/:name',
    // The action and route params are extracted from the path.

    // Optional: Override the `navigationOptions` for the screen
    navigationOptions: ({navigation}) => ({
      title: `${navigation.state.params.name}'s Profile'`,
    }),
  },

  ...MyOtherRoutes,
});

告訴當前導航有多少頁面，path和navigationOptions可以省略不寫，每個頁面都有自己的NavigationOptions，可以寫在頁面對應的js文件中

RouteConfigs：

API參數{screen ，path ，navigationOptions}

StackNavigatorConfig：

Options for the router:

• initialRouteName - 設置哪個頁面爲棧底頁面. 必須是RouteConfig中的某一個頁面.
• initialRouteParams - 初始路由的參數
• navigationOptions - 所有stack中頁面的默認的navigationOptions
• paths - A mapping of overrides for the paths set in the route configs

Visual options:

• mode - Defines the style for rendering and transitions:
  • card - 使用標準的iOS、android跳轉方式，默認是card
  • modal - iOS下頁面從底部滑入，僅僅在iOS下有效在android下無效
• headerMode - Specifies how the header should be rendered:   一般這麼寫

  headerMode: Platform.OS === 'ios' ? 'float' : 'screen',

  • float - Render a single header that stays at the top and animates as screens are changed. This is a common pattern on iOS.
  • screen - Each screen has a header attached to it and the header fades in and out together with the screen. This is a common pattern on Android.
  • none - No header will be rendered.
• cardStyle - Use this prop to override or extend the default style for an individual card in stack.
• transitionConfig - Function to return an object that overrides default screen transitions.
• onTransitionStart - Function to be invoked when the card transition animation is about to start.
• onTransitionEnd - Function to be invoked once the card transition animation completes.

NavigationOptions：

title 

導航欄的標題以及tabbar的標題設置

header 

React Element or a function that given HeaderProps returns a React Element, to display as a header. 設置爲null來隱藏導航欄

headerTitle 

導航欄的標題. Defaults to scene title

headerBackTitle 

iOS中導航欄的返回按鈕的標題或者爲null. Defaults to scene title

headerTruncatedBackTitle 

Title string used by the back button when headerBackTitle doesn't fit on the screen. "Back" by default.

headerRight 

導航欄右側顯示的React Element 

headerLeft 

導航欄左側顯示的React Element

headerStyle 

Style object for the header

headerTitleStyle 

Style object for the title component

headerBackTitleStyle 

Style object for the back title

headerTintColor 

Tint color for the header

headerPressColorAndroid 

Color for material ripple (Android >= 5.0 only)

gesturesEnabled 

Whether you can use gestures to dismiss this screen. Defaults to true on iOS, false on Android.

2.TabNavigator—tab欄切換

用於通過TabRouter輕鬆設置帶有多個選項卡的屏幕。

方法：

TabNavigator(RouteConfigs, TabNavigatorConfig)

例子：

class MyHomeScreen extends React.Component {
  static navigationOptions = {
    tabBarLabel: 'Home',
    // Note: By default the icon is only shown on iOS. Search the showIcon option below.
    tabBarIcon: ({ tintColor }) => (
      <Image source={require('./chats-icon.png')} style={[styles.icon, {tintColor: tintColor}]} />
    ),
  }; 
 
  render() {
    return (
      <Button onPress={() => this.props.navigation.navigate('Notifications')} title="Go to notifications" />
    );
  }
} 
 
class MyNotificationsScreen extends React.Component {
  static navigationOptions = {
    tabBarLabel: 'Notifications',
    tabBarIcon: ({ tintColor }) => (
      <Image source={require('./notif-icon.png')} style={[styles.icon, {tintColor: tintColor}]} />
    ),
  }; 
 
  render() {
    return (
      <Button onPress={() => this.props.navigation.goBack()} title="Go back home" />
    );
  }
} 
 
const styles = StyleSheet.create({
  icon: {
    width: 26,
    height: 26,
  },
}); 
 
const MyApp = TabNavigator({
  Home: {
    screen: MyHomeScreen,
  },
  Notifications: {
    screen: MyNotificationsScreen,
  },
}, {
  tabBarOptions: {
    activeTintColor: '#e91e63',
  },
});

RouteConfigs：

API參數{screen ，path ，navigationOptions}

TabNavigatorConfig：

• tabBarComponent- 要用作標籤欄的組件，例如 （這是iOS上的默認設置）， （這是Android上的默認設置）TabBarBottom TabBarTop 
• tabBarPosition- 標籤欄的位置可以是或'top' 'bottom'
• swipeEnabled - 是否允許在標籤之間進行滑動
• animationEnabled - 是否在更改標籤時進行動畫處理
• lazy - 是否根據需要懶惰呈現標籤，而不是提前製作
• tabBarOptions - 配置標籤欄，如下所示。

幾個選項被傳遞到底層路由器來修改導航邏輯：

• initialRouteName - 第一次加載時初始標籤路由的routeName
• order - 定義選項卡順序的routeNames數組
• paths - 將routeName映射到路徑配置，該配置將覆蓋routeConfigs中設置的路徑。
• backBehavior - 後退按鈕是否會使Tab鍵切換到初始選項卡？如果是，否則設置。默認爲行爲。initialRoute none initialRoute 

NavigationOptions：

title ＃

通用標題可以用作備用和headerTitle tabBarLabel

tabBarVisible  

True或false顯示或隱藏選項卡欄，如果未設置，則默認爲true

tabBarIcon  

React Element或者一個給定的函數返回一個React.Element，以在tab欄中顯示{ focused: boolean, tintColor: string } 

tabBarLabel  

標籤欄或React元素中顯示的標籤的標題字符串或者給定的函數返回一個React.Element，以在標籤欄中顯示。當未定義時，使用場景。要隱藏，請參見上一節。{ focused: boolean, tintColor: string } title tabBarOptions.showLabel 

tabBarOptionsfor （iOS上的默認標籤欄） TabBarBottom   

• activeTintColor - 活動標籤的標籤和圖標顏色
• activeBackgroundColor - 活動選項卡的背景顏色
• inactiveTintColor - 不活動標籤的標籤和圖標顏色
• inactiveBackgroundColor - 非活動標籤的背景顏色
• showLabel - 是否顯示標籤的標籤，默認爲true
• style - 標籤欄的樣式對象
• labelStyle - 標籤標籤的樣式對象
• tabStyle - 標籤的樣式對象

例：

tabBarOptions: {
  activeTintColor: '#e91e63',
  labelStyle: {
    fontSize: 12,
  },
  style: {
    backgroundColor: 'blue',
  },
}

tabBarOptionsfor （Android上的默認標籤欄） TabBarTop   

• activeTintColor - 活動標籤的標籤和圖標顏色
• inactiveTintColor - 不活動標籤的標籤和圖標顏色
• showIcon - 是否顯示標籤的圖標，默認值爲false
• showLabel - 是否顯示標籤的標籤，默認爲true
• upperCaseLabel - 是否使標籤大寫，默認爲true
• pressColor - 顏色紋理（Android> = 5.0）
• pressOpacity - 按壓標籤的不透明度（iOS和Android <5.0 only）
• scrollEnabled - 是否啓用可滾動選項卡
• tabStyle - 標籤的樣式對象
• indicatorStyle - 標籤指示器的樣式對象（選項卡底部的行）
• labelStyle - 標籤標籤的樣式對象
• iconStyle - 標籤圖標的樣式對象
• style - 標籤欄的樣式對象

 

例：

 

tabBarOptions: {
  labelStyle: {
    fontSize: 12,
  },
  tabStyle: {
    width: 100,    
  },
  style: {
    backgroundColor: 'blue',
  },
}

3.DrawerNavigator—抽屜

用於輕鬆設置帶抽屜導航的屏幕

 

  方法：

DrawerNavigator(RouteConfigs, DrawerNavigatorConfig)

 例子：

class MyHomeScreen extends React.Component {
  static navigationOptions = {
    drawerLabel: 'Home',
    drawerIcon: ({ tintColor }) => (
      <Image source={require('./chats-icon.png')} style={[styles.icon, {tintColor: tintColor}]} />
    ),
  }; 
 
  render() {
    return (
      <Button onPress={() => this.props.navigation.navigate('Notifications')} title="Go to notifications" />
    );
  }
} 
 
class MyNotificationsScreen extends React.Component {
  static navigationOptions = {
    drawerLabel: 'Notifications',
    drawerIcon: ({ tintColor }) => (
      <Image source={require('./notif-icon.png')} style={[styles.icon, {tintColor: tintColor}]} />
    ),
  }; 
 
  render() {
    return (
      <Button onPress={() => this.props.navigation.goBack()} title="Go back home" />
    );
  }
} 
 
const styles = StyleSheet.create({
  icon: {
    width: 24,
    height: 24,
  },
}); 
 
const MyApp = DrawerNavigator({
  Home: {
    screen: MyHomeScreen,
  },
  Notifications: {
    screen: MyNotificationsScreen,
  },
});

打開和關閉抽屜

this.props.navigation.navigate('DrawerOpen'); // open drawer
this.props.navigation.navigate('DrawerClose'); // close drawer

RouteConfigs：

API參數{screen ，path ，navigationOptions}

DrawerNavigatorConfig：

• • drawerWidth - 抽屜的寬度

  • drawerPosition- 選項是或。默認是位置。left right left 

  • contentComponent - 用於呈現抽屜內容的組件，例如導航項。接收抽屜的支柱。默認爲。有關詳細信息，請參閱下文。navigation DrawerItems 

  • contentOptions - 配置抽屜內容，見下文。

  幾個選項被傳遞到底層路由器來修改導航邏輯：

  • initialRouteName - 初始路由的routeName。

  • order - 定義抽屜物品順序的routeNames數組。

  • paths - 將routeName映射到路徑配置，該配置將覆蓋routeConfigs中設置的路徑。

  • backBehavior - 後退按鈕是否會切換到初始路線？如果是，否則設置。默認爲行爲。initialRoute none initialRoute 

  提供自定義抽屜contentComponent：

• import { DrawerItems } from 'react-navigation'; 
   
  const CustomDrawerContentComponent = (props) => (
    <View style={style.container}>
      <DrawerItems {...props} />
    </View>
  ); 
   
  const styles = StyleSheet.create({
    container: {
      flex: 1,
    },
  });

  contentOptions for DrawerItems：

• items - 路由數組，可以修改或覆蓋
• activeItemKey - 標識活動路線的鑰匙
• activeTintColor - 活動標籤的標籤和圖標顏色
• activeBackgroundColor - 活動標籤的背景顏色
• inactiveTintColor - 無效標籤的標籤和圖標顏色
• inactiveBackgroundColor - 非活動標籤的背景顏色
• onItemPress(route) - 按下項目時調用的功能
• style - 內容部分的樣式對象
• labelStyle- 當您的標籤是字符串時，樣式對象將覆蓋內容部分中的樣式Text 

NavigationOptions：

title  

通用標題可以用作備用和headerTitle drawerLabel

drawerLabel  

String，React元素或給定的函數返回一個React.Element，顯示在抽屜側邊欄中。當不確定，現場使用{ focused: boolean, tintColor: string } title 

drawerIcon ＃

React Element或一個函數，返回一個React.Element，顯示在抽屜側邊欄中{ focused: boolean, tintColor: string } 

tabBarOptionsfor （iOS上的默認標籤欄） TabBarBottom   

• activeTintColor - 活動標籤的標籤和圖標顏色
• activeBackgroundColor - 活動選項卡的背景顏色
• inactiveTintColor - 不活動標籤的標籤和圖標顏色
• inactiveBackgroundColor - 非活動標籤的背景顏色
• showLabel - 是否顯示標籤的標籤，默認爲true
• style - 標籤欄的樣式對象
• labelStyle - 標籤標籤的樣式對象
• tabStyle - 標籤的樣式對象

例：

tabBarOptions: {
  activeTintColor: '#e91e63',
  labelStyle: {
    fontSize: 12,
  },
  style: {
    backgroundColor: 'blue',
  },
}

tabBarOptionsfor （Android上的默認標籤欄） TabBarTop   

• activeTintColor - 活動標籤的標籤和圖標顏色
• inactiveTintColor - 不活動標籤的標籤和圖標顏色
• showIcon - 是否顯示標籤的圖標，默認值爲false
• showLabel - 是否顯示標籤的標籤，默認爲true
• upperCaseLabel - 是否使標籤大寫，默認爲true
• pressColor - 顏色紋理（Android> = 5.0）
• pressOpacity - 按壓標籤的不透明度（iOS和Android <5.0 only）
• scrollEnabled - 是否啓用可滾動選項卡
• tabStyle - 標籤的樣式對象
• indicatorStyle - 標籤指示器的樣式對象（選項卡底部的行）
• labelStyle - 標籤標籤的樣式對象
• iconStyle - 標籤圖標的樣式對象
• style - 標籤欄的樣式對象

 

例：

tabBarOptions: {
  labelStyle: {
    fontSize: 12,
  },
  tabStyle: {
    width: 100,    
  },
  style: {
    backgroundColor: 'blue',
  },
}