React Native Navigation 官方文档地址: https://wix.github.io/react-native-navigation

目前稳定版本为1.0版本, 2.0是开发版, 暂时不要用.

代码库地址: https://github.com/wix/react-native-navigation

支持单页直接跳转, 直接自带顶部导航栏配置(返回,标题栏和右侧按钮), 支持直接跳转到多Tab页面, 支持隐藏显示Tab页, 支持数字气泡.

此组件底层全部使用Native代码实现, 基于iOS和Android封装而成, 缺陷是不支持顶部导航栏, 顶部导航栏可参考使用 https://github.com/Slowyn/react-native-underline-tabbar(带数字提示), 不带数字提示的可使用 https://github.com/skv-headless/react-native-scrollable-tab-view.

[TODO 翻译RRN英文文档.]

[整合步骤]

[1. 页面注册]

app/screen.js 所有需要通过导航跳转的组件都需要在此文件中注册, 第一个参数为组件别名, 需要唯一, 建议带包名.

[2. 初始化App首页]

(一般用在首次启动App时)

[整个App重新导航到单个页面]

Navigation.startSingleScreenApp({
    screen: {
        screen: 'user.LoginPage',
    },
    passProps: {}, // 被跳转页面的属性 (可选)
    portraitOnlyMode: true,// 只支持竖屏
});

[打开新的标签页App]

(只支持底部标签页)

Navigation.startTabBasedApp({
  tabs: [
    {
      label: '标签', // iOS图标下的标题 (optional)
      screen: 'example.FirstTabScreen', // unique ID registered with Navigation.registerScreen
      icon: require('../img/one.png'), // 标签未选中时的图片 (optional on iOS)
      selectedIcon: require('../img/one_selected.png'), // 标签选中时的图片 (optional, 仅支持iOS. Android使用 `tabBarSelectedButtonColor` 代替)
      title: 'Screen One', // 导航栏标题 (optional)
      navigatorStyle: {}, // override the navigator style for the tab screen, see "Styling the navigator" below (optional),
      navigatorButtons: {} // override the nav buttons for the tab screen, see "Adding buttons to the navigator" below (optional)
    },
    {
      label: 'Two',
      screen: 'example.SecondTabScreen',
      icon: require('../img/two.png'),
      selectedIcon: require('../img/two_selected.png'),
      title: 'Screen Two'
    }
  ],
  tabsStyle: { // optional, add this if you want to style the tab bar beyond the defaults
    tabBarButtonColor: '#ffff00', // optional, change the color of the tab icons and text (also unselected)
    tabBarSelectedButtonColor: '#ff9900', // optional, change the color of the selected tab icon and text (only selected)
    tabBarBackgroundColor: '#551A8B' // optional, change the background color of the tab bar
  },
  appStyle: {
    orientation: 'portrait' // Sets a specific orientation to the entire app. Default: 'auto'. Supported values: 'auto', 'landscape', 'portrait'
  },
  passProps: {}, // simple serializable object that will pass as props to all top screens (optional)
  animationType: 'slide-down' // optional, add transition animation to root change: 'none', 'slide-down', 'fade'
});

[3. 在子页面中进行跳转]

[跳入](

this.props.navigator.push({
  screen: 'example.ScreenThree', // unique ID registered with Navigation.registerScreen
  title: undefined, // 导航栏标题 (可选)
  titleImage: require('../../img/my_image.png'), //导航栏标题图片, 代替文字标题 (可选)
  passProps: {}, // 被跳转页面的属性 (可选)
  animated: true, // 是否显示动画 (可选)
  backButtonTitle: undefined, // 返回按钮的文字 (可选)
  backButtonHidden: false, // 是否隐藏返回按钮 (可选)
  navigatorStyle: {}, // 覆盖默认导航栏风格 (可选)
  navigatorButtons: {} // 覆盖默认导航栏按钮 (可选)
});

[跳出](

this.props.navigator.pop({
  animated: true // does the pop have transition animation or does it happen immediately (可选)
});

[替换当前页(不可返回原页面)]

this.props.navigator.resetTo({
  screen: 'example.ScreenThree', // unique ID registered with Navigation.registerScreen
  title: undefined, // 导航栏标题 (可选)
  titleImage: require('../../img/my_image.png'), //导航栏标题图片, 代替文字标题 (可选)
  passProps: {}, // 被跳转页面的属性 (可选)
  animated: true, // 是否显示动画 (可选)
  navigatorStyle: {}, // 覆盖默认导航栏风格 (可选)
  navigatorButtons: {} // 覆盖默认导航栏按钮 (可选)
});

[显示模态页面]

this.props.navigator.showModal({
  screen: "example.ModalScreen", // unique ID registered with Navigation.registerScreen
  title: "Modal", // title of the screen as appears in the nav bar (可选)
  passProps: {}, // simple serializable object that will pass as props to the modal (可选)
  navigatorStyle: {}, // override the navigator style for the screen, see "Styling the navigator" below (可选)
  animationType: 'slide-up' // 'none' / 'slide-up' , appear animation for the modal (可选, default 'slide-up')
});

[关闭模态页面]

this.props.navigator.dismissModal({
  animationType: 'slide-down' // 'none' / 'slide-down' , dismiss animation for the modal (可选, default 'slide-down')
});

[切换标签页的显示和隐藏]

this.props.navigator.toggleTabs({
  to: 'hidden', // 必填参数, 'hidden' = hide tab bar, 'shown' = show tab bar
  animated: true // does the toggle have transition animation or does it happen immediately (optional)
});

[切换到某个标签页](

this.props.navigator.switchToTab({
  tabIndex: 0 // (可选) 如果不提供, 则当前屏幕的标签页将被选中
});

[显示数字气泡提示]

this.props.navigator.setTabBadge({
  tabIndex: 0, // (可选) 不填写时默认添加到当前标签页
  badge: 17 // 数字气泡提示, 设置为null会删除
});

[Android设置导航软键盘背景色]

TODO

[切换导航栏的显示和隐藏](

this.props.navigator.toggleNavBar({
  to: 'hidden', // 必填参数, 'hidden' = hide tab bar, 'shown' = show tab bar
  animated: true // does the toggle have transition animation or does it happen immediately (optional)
});

注: 因为咱们的项目之前有一些导航栏是自己定制的, 如果希望页面打开时就隐藏, 可以这样写:

export default class XXXPage extends Component {

    static navigatorStyle = {
        navBarHidden: false, // 隐藏默认的顶部导航栏
        tabBarHidden: true, // 默认隐藏底部标签栏
    };

[常见问题及解决]

[和内置navigator的区别]

navigator.replace/push等报错, 因为现在项目的写法都是直接传入组件, 而replace方法要改成用reset, push等则需要传入页面ID.

更多例子参考: https://github.com/wix/react-native-navigation/tree/master/example