Quick Start Guide - 快速入门指南

要开始使用React Navigation，你只需通过npm安装react-navigation包即可。

译者注：为了方便理解，下文中将所有screen翻译为页面

使用npm安装

  1. npm install --save react-navigation

使用Yarn安装

  1. yarn add react-navigation

要开始使用React Navigation，你必须创建一个导航器。React Navigation带有三个默认导航器。

  • StackNavigator - 为应用程序提供了一种在页面之间切换的方法，其中每个新页面都放置在堆栈的顶部。
  • TabNavigator - 用于设置带有多个tab的页面。
  • DrawerNavigator - 用于设置带抽屉导航的页面。

创建一个StackNavigator

StackNavigator是最常见的导航形式，所以我们将其用作基本演示。从创建一个StackNavigator开始。

  1. import { StackNavigator } from 'react-navigation';
  3. const RootNavigator = StackNavigator({
  5. });
  7. export default RootNavigator;

然后，我们可以为StackNavigator添加页面，每个键代表一个页面。

  1. import React from 'react';
  2. import { View, Text } from 'react-native';
  3. import { StackNavigator } from 'react-navigation';
  5. const HomeScreen = () => (
  6.   <View style={{ flex: 1, alignItems: 'center', justifyContent: 'center' }}>
  7.     <Text>Home Screen</Text>
  8.   </View>
  9. );
  11. const DetailsScreen = () => (
  12.   <View style={{ flex: 1, alignItems: 'center', justifyContent: 'center' }}>
  13.     <Text>Details Screen</Text>
  14.   </View>
  15. );
  17. const RootNavigator = StackNavigator({
  18.   Home: {
  19.     screen: HomeScreen,
  20.   },
  21.   Details: {
  22.     screen: DetailsScreen,
  23.   },
  24. });
  26. export default RootNavigator;

现在让我们为导航栏添加一个标题。

  1. ...
  3. const RootNavigator = StackNavigator({
  4.   Home: {
  5.     screen: HomeScreen,
  6.     navigationOptions: {
  7.       headerTitle: 'Home',
  8.     },
  9.   },
  10.   Details: {
  11.     screen: DetailsScreen,
  12.     navigationOptions: {
  13.       headerTitle: 'Details',
  14.     },
  15.   },
  16. });
  18. export default RootNavigator;

到此，我们应该能从Home页面导航到Details页面。当你使用导航器注册一个组件时，组件将会添加一个navigation属性。这个navigation属性驱动如何在不同页面之间切换。

要从Home页面切换到Details页面，我们将要使用navigation.navigate，如下所示：

  1. ...
  2. import { View, Text, Button } from 'react-native';
  4. const HomeScreen = ({ navigation }) => (
  5.   <View style={{ flex: 1, alignItems: 'center', justifyContent: 'center' }}>
  6.     <Text>Home Screen</Text>
  7.     <Button
  8.       onPress={() => navigation.navigate('Details')}
  9.       title="Go to details"
  10.     />
  11.   </View>
  12. );
  14. ...

这样就可以了！这是使用StackNavigator和React Navigation的一个整体基础。下面是这个例子的完整代码：

  1. import React from 'react';
  2. import { View, Text, Button } from 'react-native';
  3. import { StackNavigator } from 'react-navigation'; // 1.0.0-beta.14
  5. const HomeScreen = ({ navigation }) => (
  6.   <View style={{ flex: 1, alignItems: 'center', justifyContent: 'center' }}>
  7.     <Text>Home Screen</Text>
  8.     <Button
  9.       onPress={() => navigation.navigate('Details')}
  10.       title="Go to details"
  11.     />
  12.   </View>
  13. );
  15. const DetailsScreen = () => (
  16.   <View style={{ flex: 1, alignItems: 'center', justifyContent: 'center' }}>
  17.     <Text>Details Screen</Text>
  18.   </View>
  19. );
  21. const RootNavigator = StackNavigator({
  22.   Home: {
  23.     screen: HomeScreen,
  24.     navigationOptions: {
  25.       headerTitle: 'Home',
  26.     },
  27.   },
  28.   Details: {
  29.     screen: DetailsScreen,
  30.     navigationOptions: {
  31.       headerTitle: 'Details',
  32.     },
  33.   },
  34. });
  36. export default RootNavigator;

创建一个TabNavigator

要开始使用TabNavigator，首先要导入TabNavigator，并且创建一个新的RootTabs组件。

  1. import { TabNavigator } from 'react-navigation';
  3. const RootTabs = TabNavigator({
  5. });
  7. export default RootTabs;

然后，我们需要创建一些页面，并将其添加到我们的TabNavigator。

  1. import React from 'react';
  2. import { View, Text } from 'react-native';
  3. import { TabNavigator } from 'react-navigation';
  5. const HomeScreen = () => (
  6.   <View style={{ flex: 1, alignItems: 'center', justifyContent: 'center' }}>
  7.     <Text>Home Screen</Text>
  8.   </View>
  9. );
  11. const ProfileScreen = () => (
  12.   <View style={{ flex: 1, alignItems: 'center', justifyContent: 'center' }}>
  13.     <Text>Profile Screen</Text>
  14.   </View>
  15. );
  17. const RootTabs = TabNavigator({
  18.   Home: {
  19.     screen: HomeScreen,
  20.   },
  21.   Profile: {
  22.     screen: ProfileScreen,
  23.   },
  24. });
  26. export default RootTabs;

快成功了！现在让我们来为标签栏设置一个标签和图标。

我们将在示例中使用react-native-vector-icons组件，如果你的项目中还没有安装这个组件，那么请安装它。

  1. ...
  2. import Ionicons from 'react-native-vector-icons/Ionicons';
  4. ...
  6. const RootTabs = TabNavigator({
  7.   Home: {
  8.     screen: HomeScreen,
  9.     navigationOptions: {
  10.       tabBarLabel: 'Home',
  11.       tabBarIcon: ({ tintColor, focused }) => (
  12.         <Ionicons
  13.           name={focused ? 'ios-home' : 'ios-home-outline'}
  14.           size={26}
  15.           style={{ color: tintColor }}
  16.         />
  17.       ),
  18.     },
  19.   },
  20.   Profile: {
  21.     screen: ProfileScreen,
  22.     navigationOptions: {
  23.       tabBarLabel: 'Profile',
  24.       tabBarIcon: ({ tintColor, focused }) => (
  25.         <Ionicons
  26.           name={focused ? 'ios-person' : 'ios-person-outline'}
  27.           size={26}
  28.           style={{ color: tintColor }}
  29.         />
  30.       ),
  31.     },
  32.   },
  33. });
  35. export default RootTabs;

这将确保tabBarLabel是一致的（使用嵌套的导航器时很重要），它会设置一个tabBarIcon。这个图标只有在使用标签栏组件时才能在iOS上默认可见，这与Android上的标准设计模式相一致。

你可以在下面查看完整的代码：

  1. import React from 'react';
  2. import { View, Text } from 'react-native';
  3. import { TabNavigator } from 'react-navigation'; // 1.0.0-beta.14
  4. import Ionicons from 'react-native-vector-icons/Ionicons'; // 4.4.2
  6. const HomeScreen = () => (
  7.   <View style={{ flex: 1, alignItems: 'center', justifyContent: 'center' }}>
  8.     <Text>Home Screen</Text>
  9.   </View>
  10. );
  12. const ProfileScreen = () => (
  13.   <View style={{ flex: 1, alignItems: 'center', justifyContent: 'center' }}>
  14.     <Text>Profile Screen</Text>
  15.   </View>
  16. );
  18. const RootTabs = TabNavigator({
  19.   Home: {
  20.     screen: HomeScreen,
  21.     navigationOptions: {
  22.       tabBarLabel: 'Home',
  23.       tabBarIcon: ({ tintColor, focused }) => (
  24.         <Ionicons
  25.           name={focused ? 'ios-home' : 'ios-home-outline'}
  26.           size={26}
  27.           style={{ color: tintColor }}
  28.         />
  29.       ),
  30.     },
  31.   },
  32.   Profile: {
  33.     screen: ProfileScreen,
  34.     navigationOptions: {
  35.       tabBarLabel: 'Profile',
  36.       tabBarIcon: ({ tintColor, focused }) => (
  37.         <Ionicons
  38.           name={focused ? 'ios-person' : 'ios-person-outline'}
  39.           size={26}
  40.           style={{ color: tintColor }}
  41.         />
  42.       ),
  43.     },
  44.   },
  45. });
  47. export default RootTabs;

创建一个DrawerNavigator

要开始使用DrawerNavigator，首先要导入DrawerNavigator，并且创建一个新的RootDrawer组件。

  1. import { DrawerNavigator } from 'react-navigation';
  3. const RootDrawer = DrawerNavigator({
  5. });
  7. export default RootDrawer;

然后，我们需要创建一些页面，并将其添加到我们的DrawerNavigator。

  1. import React from 'react';
  2. import { View, Text } from 'react-native';
  3. import { DrawerNavigator } from 'react-navigation';
  5. const HomeScreen = () => (
  6.   <View style={{ flex: 1, alignItems: 'center', justifyContent: 'center' }}>
  7.     <Text>Home Screen</Text>
  8.   </View>
  9. );
  11. const ProfileScreen = () => (
  12.   <View style={{ flex: 1, alignItems: 'center', justifyContent: 'center' }}>
  13.     <Text>Profile Screen</Text>
  14.   </View>
  15. );
  17. const RootDrawer = DrawerNavigator({
  18.   Home: {
  19.     screen: HomeScreen,
  20.   },
  21.   Profile: {
  22.     screen: ProfileScreen,
  23.   },
  24. });
  26. export default RootDrawer;

快成功了！现在让我们来为标签栏设置一个标签和图标。

我们将在示例中使用react-native-vector-icons组件，如果你的项目中还没有安装这个组件，那么请安装它。

  1. ..
  2. import Ionicons from 'react-native-vector-icons/Ionicons';
  4. ...
  6. const RootDrawer = DrawerNavigator({
  7.   Home: {
  8.     screen: HomeScreen,
  9.     navigationOptions: {
  10.       drawerLabel: 'Home',
  11.       drawerIcon: ({ tintColor, focused }) => (
  12.         <Ionicons
  13.           name={focused ? 'ios-home' : 'ios-home-outline'}
  14.           size={20}
  15.           style={{ color: tintColor }}
  16.         />
  17.       ),
  18.     },
  19.   },
  20.   Profile: {
  21.     screen: ProfileScreen,
  22.     navigationOptions: {
  23.       drawerLabel: 'Profile',
  24.       drawerIcon: ({ tintColor, focused }) => (
  25.         <Ionicons
  26.           name={focused ? 'ios-person' : 'ios-person-outline'}
  27.           size={20}
  28.           style={{ color: tintColor }}
  29.         />
  30.       ),
  31.     },
  32.   },
  33. });
  35. export default RootDrawer;

要打开抽屉，你可以从屏幕左边缘向右滑动。你也可以通过navigation.navigate('DrawerToggle')选项打开抽屉视图，我们现在将打开选项添加到Home组件中。确保你已经从react-native中导入Button组件。

  1. ...
  3. const HomeScreen = ({ navigation }) => (
  4.   <View style={{ flex: 1, alignItems: 'center', justifyContent: 'center' }}>
  5.     <Text>Home Screen</Text>
  6.     <Button
  7.       onPress={() => navigation.navigate('DrawerToggle')}
  8.       title="Open Drawer"
  9.     />
  10.   </View>
  11. );
  13. ...

你可以在下面查看已完成的代码。

  1. import React from 'react';
  2. import { View, Text } from 'react-native';
  3. import { DrawerNavigator } from 'react-navigation'; // 1.0.0-beta.14
  4. import Ionicons from 'react-native-vector-icons/Ionicons'; // 4.4.2
  6. const HomeScreen = () => (
  7.   <View style={{ flex: 1, alignItems: 'center', justifyContent: 'center' }}>
  8.     <Text>Home Screen</Text>
  9.   </View>
  10. );
  12. const ProfileScreen = () => (
  13.   <View style={{ flex: 1, alignItems: 'center', justifyContent: 'center' }}>
  14.     <Text>Profile Screen</Text>
  15.   </View>
  16. );
  19. const RootDrawer = DrawerNavigator({
  20.   Home: {
  21.     screen: HomeScreen,
  22.     navigationOptions: {
  23.       drawerLabel: 'Home',
  24.       drawerIcon: ({ tintColor, focused }) => (
  25.         <Ionicons
  26.           name={focused ? 'ios-home' : 'ios-home-outline'}
  27.           size={26}
  28.           style={{ color: tintColor }}
  29.         />
  30.       ),
  31.     },
  32.   },
  33.   Profile: {
  34.     screen: ProfileScreen,
  35.     navigationOptions: {
  36.       drawerLabel: 'Profile',
  37.       drawerIcon: ({ tintColor, focused }) => (
  38.         <Ionicons
  39.           name={focused ? 'ios-person' : 'ios-person-outline'}
  40.           size={26}
  41.           style={{ color: tintColor }}
  42.         />
  43.       ),
  44.     },
  45.   },
  46. });
  48. export default RootDrawer;