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',
  },
}