React Native react-navigation 导航库使用教程

React Navigation 使用指南

React Navigation 是 Facebook 推荐的 React Native 导航库，用于在移动应用中实现页面导航效果。在使用之前，需要在项目根目录下执行以下命令进行安装：

yarn add react-navigation

React Navigation 主要提供三种类型的导航器：

• StackNavigator：类似于 iOS 中的 UINavigationController，采用栈结构管理页面，通过 push 和 pop 操作展示新页面。
• TabNavigator：实现类似 UITabBarController 的效果，用于在同一屏幕内横向切换不同界面。
• DrawerNavigator：提供侧滑栏菜单导航功能。

StackNavigator 的使用

首先，在项目根目录下创建一个 stack.js 文件。在 iOS 端，需要将入口文件替换为该文件：

jsCodeLocation = [[RCTBundleURLProvider sharedSettings] jsBundleURLForBundleRoot:@"stack" fallbackResource:nil];

接下来，定义页面结构和组件。注册根组件并导出：

AppRegistry.registerComponent('DemoProject', () => RootPage);
export default class RootPage extends React.Component {
  render() {
    return <CustomStack />;
  }
}

其中，CustomStack 是自定义的导航组件，使用 StackNavigator 定义：

export const CustomStack = StackNavigator({
  HomePage: {
    screen: HomeVC
  },
  SecondPage: {
    screen: SecondVC
  },
});

StackNavigator 接受一个配置对象，其中 HomePage 和 SecondPage 是两个页面，screen 参数指定对应的页面组件。页面顺序即为进栈顺序。

然后，分别定义 HomeVC 和 SecondVC 组件：

class HomeVC extends React.Component {
  static navigationOptions = {
    title: 'HomeVC',
  };
  render() {
    const { navigate } = this.props.navigation;
    return (
      <View>
        <Text>Hello, This is HomeVC!</Text>
        <Button
          onPress={() => navigate('SecondPage')}
          title="Jump to SecondVC"
        />
      </View>
    );
  }
}

class SecondVC extends React.Component {
  static navigationOptions = {
    title: 'SecondVC',
  };
  render() {
    return (
      <View>
        <Text>Now, you are in SecondVC</Text>
      </View>
    );
  }
}

实现后，可以在应用中看到页面跳转效果：从 HomeVC 点击按钮跳转到 SecondVC。

完整代码示例：

import React from 'react';
import { AppRegistry, StyleSheet, Text, View, Button } from 'react-native';
import { StackNavigator } from 'react-navigation';

AppRegistry.registerComponent('DemoProject', () => RootPage);
export default class RootPage extends React.Component {
  render() {
    return <CustomStack />;
  }
}

class HomeVC extends React.Component {
  static navigationOptions = {
    title: 'HomeVC',
  };
  render() {
    const { navigate } = this.props.navigation;
    return (
      <View>
        <Text>Hello, This is HomeVC!</Text>
        <Button
          onPress={() => navigate('SecondPage')}
          title="Jump to SecondVC"
        />
      </View>
    );
  }
}

class SecondVC extends React.Component {
  static navigationOptions = {
    title: 'SecondVC',
  };
  render() {
    return (
      <View>
        <Text>Now, you are in SecondVC</Text>
      </View>
    );
  }
}

export const CustomStack = StackNavigator({
  HomePage: {
    screen: HomeVC
  },
  SecondPage: {
    screen: SecondVC
  },
});

TabNavigator 的使用

TabNavigator 用于创建底部或顶部的选项卡导航。声明方式如下：

const MainTabController = TabNavigator({
  TabItem_1: {
    screen: HomeVC
  },
  TabItem_2: {
    screen: SecondVC
  },
  TabItem_3: {
    screen: ThirdVC
  },
}, {
  tabBarPosition: 'bottom',
  tabBarOptions: {
    activeTintColor: '#e91e63',
  },
});

每个选项卡对应一个界面组件。tabBarPosition 设置选项卡位置，可选 top 或 bottom；activeTintColor 设置选中时选项卡的颜色。

页面组件可以通过 navigationOptions 设置选项卡的标签和图标：

class HomeVC extends React.Component {
  static navigationOptions = {
    tabBarLabel: 'Home',
    tabBarIcon: ({ tintColor }) => (
      <Image
        source={require('./imgs/01.png')}
        style={[styles.icon, {tintColor: tintColor}]}
      />
    ),
  };
  render() {
    return (
      <View style={styles.homecontainer}>
        <Text>This is HomeVC page</Text>
      </View>
    );
  }
}

设置完成后，应用会显示底部选项卡，点击可在不同页面间切换。

还可以将 StackNavigator 集成到 TabNavigator 中，实现更复杂的导航。例如，将导航栈作为一个页面插入选项卡：

const HomeNav = StackNavigator({
  HomePage: {
    screen: HomeVC,
    navigationOptions: {
      title: 'HomePage',
    }
  },
  SecondPage: {
    screen: SecondVC
  },
});

const MainTabController = TabNavigator({
  TabItem_1: {
    screen: HomeNav  // 将导航栈作为页面插入
  },
  TabItem_2: {
    screen: MessageVC
  },
  TabItem_3: {
    screen: SettingVC
  },
}, {
  tabBarPosition: 'bottom',
  tabBarOptions: {
    activeTintColor: '#e91e63',
  },
});

这样，第一个选项卡内可以嵌套页面栈，实现选项卡与堆栈导航的结合效果。

DrawerNavigator 的使用

DrawerNavigator 用于创建侧滑抽屉菜单。定义方式如下：

class MyHomeScreen extends React.Component {
  static navigationOptions = {
    drawerLabel: 'Home',
    drawerIcon: ({ tintColor }) => (
      <Image
        source={require('./imgs/01.png')}
        style={[styles.icon, {tintColor: tintColor}]}
      />
    ),
  };

  render() {
    return (
      <View style={styles.container}>
        <Text>This HomePage</Text>
        <Button
          onPress={() => this.props.navigation.navigate('DrawerOpen')}
          title="Show Drawer"
        />
      </View>
    );
  }
}

class MyNotificationsScreen extends React.Component {
  static navigationOptions = {
    drawerLabel: 'Notifications',
    drawerIcon: ({ tintColor }) => (
      <Image
        source={require('./imgs/02.png')}
        style={[styles.icon, {tintColor: tintColor}]}
      />
    ),
  };

  render() {
    return (
      <View style={styles.container}>
        <Text>This MyNotificationsScreen</Text>
        <Button
          onPress={() => this.props.navigation.navigate('DrawerOpen')}
          title="Go back home"
        />
      </View>
    );
  }
}

const styles = StyleSheet.create({
  icon: {
    width: 24,
    height: 24,
  },
  container: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
    backgroundColor: '#F5FCFF',
  },
});

const MyApp = DrawerNavigator({
  Home: {
    screen: MyHomeScreen,
  },
  Notifications: {
    screen: MyNotificationsScreen,
  },
});

在组件中，通过 this.props.navigation.navigate('DrawerOpen') 打开抽屉菜单，通过 this.props.navigation.navigate('DrawerClose') 或点击空白区域关闭抽屉。navigationOptions 用于设置抽屉的标签和图标。

实现后，应用会显示侧滑菜单，用户可以通过按钮或手势打开和关闭抽屉。

以上是 React Navigation 三种主要导航器的基本使用方法，完整代码示例可以在 GitHub 上找到。