React Navigation：
React Navigation 是一个由社区维护的纯 JavaScript 导航库，它提供了一套用于构建 React Native 应用导航的 API。以下是一个简单的使用 React Navigation 的例子：
首先，你需要安装 React Navigation 相关的包：
npm install @react-navigation/native @react-navigation/stack
或者使用 Yarn：
yarn add @react-navigation/native @react-navigation/stack
然后，你可以在应用中使用 createStackNavigator 来创建堆栈导航器：
import React from 'react';
import { NavigationContainer } from '@react-navigation/native';
import { createStackNavigator } from '@react-navigation/stack';
import HomeScreen from './HomeScreen';
import DetailsScreen from './DetailsScreen';
const Stack = createStackNavigator();
const App = () => {
return (
<NavigationContainer>
<Stack.Navigator>
<Stack.Screen name="Home" component={HomeScreen} />
<Stack.Screen name="Details" component={DetailsScreen} />
</Stack.Navigator>
</NavigationContainer>
);
};
export default App;
在这个例子中，我们创建了一个堆栈导航器，包含两个屏幕：HomeScreen 和 DetailsScreen。你可以使用 navigate 方法在这两个屏幕之间进行导航。
React Native Navigation：
React Native Navigation 是由 Wix 开发的原生导航库，提供了更直接的原生性能，适用于对性能有较高要求的应用。以下是一个简单的使用 React Native Navigation 的例子：
首先，你需要安装 React Native Navigation 相关的包：
npm install react-native-navigation
然后，你需要在 index.js 中注册你的应用：
import { Navigation } from 'react-native-navigation';
import HomeScreen from './HomeScreen';
import DetailsScreen from './DetailsScreen';
Navigation.registerComponent('Home', () => HomeScreen);
Navigation.registerComponent('Details', () => DetailsScreen);
Navigation.events().registerAppLaunchedListener(() => {
Navigation.setRoot({
root: {
stack: {
children: [
{
component: {
name: 'Home',
},
},
],
},
},
});
});
在这个例子中，我们使用 registerComponent 方法注册了两个屏幕组件，并使用 setRoot 方法设置了应用的根导航。
无论你选择使用 React Navigation 还是 React Native Navigation，都可以根据项目需求和性能要求来进行选择。这些库都提供了丰富的文档和示例，以便更好地了解如何使用它们。
转载请注明出处：http://www.zyzy.cn/article/detail/9466/React Native