React Native 是一个非常强大的跨平台框架，可以让你使用类似于 React 的语法创建 iOS 和 Android 应用程序。 在使用 React Native 开发应用程序时，难免需要在页面之间进行跳转。本文将介绍如何使用 React Native 中的导航库来实现页面跳转。
React Navigation
React Navigation 是一个受到 React Native 和 React 人气并且受到推崇的导航库。 它提供了一个简单的方法，用于在 React Native 应用中实现页面之间的跳转。 以下是一个基本的例子，在其中使用 React Navigation 的 StackNavigator 创建一个两个页面的简单应用程序。
-- -------------------- ---- ------- ------ - -------------------- - ---- ------------------- ----- ------------- - ---------------------- ----- - ------- ---------- -- ------- - ------- ------------ -- --- ------ ------- ----- --- ------- --------------- - -------- - ------ -------------- --- - -展开代码
上面的代码中，我们使用 StackNavigator 来创建了一个名为 MainNavigator 的导航器。 它包含两个屏幕：Home 和 Detail。 随后我们将 MainNavigator 渲染到应用程序的根组件中。
如果要从 Home 页面跳转到 Detail 页面，可以使用以下代码：
this.props.navigation.navigate('Detail');
在 Detail 页面的 static navigationOptions 中，您也能够自定义导航栏上的标题：
static navigationOptions = ({ navigation }) => { const { params } = navigation.state; return { title: params ? params.otherParam : 'A Nested Details Screen', }; };
传递参数
当您需要传递参数到目标页面时，React Navigation 还允许您使用第二个参数来传递参数。 在我们的 StackNavigator 中，我们可以通过以下方式将参数传递到 Detail 页面：
this.props.navigation.navigate('Detail', { itemId: 86, otherParam: 'anything you want' });
在 Detail 页面中，我们可以通过以下代码来检索传递的参数：
const { navigation } = this.props; const itemId = navigation.getParam('itemId', 'NO-ID'); const otherParam = navigation.getParam('otherParam', 'default value');
这里 getDefaultProps 是用来设置默认属性值的方法。
用 tabBar 切换页面
另外，React Navigation 还可以支持底部的 tabBar，允许用户以交互方式切换到不同的页面。 以下是一个示例：
const MainNavigator = createBottomTabNavigator({ Home: { screen: HomeScreen }, Profile: { screen: ProfileScreen }, });
在底部 tabBar 中使用 createBottomTabNavigator 方法创建不同的屏幕即可。
结语
以上就是在 React Native 中跳转到指定页面的方法。 React Navigation 提供了一种快速且简单的方法，以便在您的 React Native 应用程序之间导航。 它对多种类型的导航选项提供了支持，例如堆栈式导航、选项卡导航等。无论您构建的应用程序类型，React Navigation 都能提供帮助。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/67c8cbf6e46428fe9ef90b10
