React Native导航栏系列（一）

对于RN新手来说，这里面的很多知识点可能会让你觉得很绕。就导航栏来说，就会让你觉得有点不适应，因为创建了一个新项目之后，导航栏的一些组件并不包括在创建好的项目中，只能在后面再进行安装。接下来，我会出RN导航栏的文章一二三。

此导航栏适用于安卓、苹果。

第一步，安装相应的组件：
在React Native项目中安装所需的软件包（根据自己的系统进行选择命令）：

npm install @react-navigation/native

yarn add @react-navigation/native

接着还需要安装一个依赖到项目中：

npm install react-native-reanimated react-native-gesture-handler react-native-screens react-native-safe-area-context @react-native-community/masked-view

yarn add react-native-reanimated react-native-gesture-handler react-native-screens react-native-safe-area-context @react-native-community/masked-view

要完成安装react-native-gesture-handler，请在你的条目文件的顶部（确保位于顶部，并且没有其他内容）添加以下内容，例如index.js或App.js：

import 'react-native-gesture-handler';

接着安装堆栈导航器库：

npm install @react-navigation/stack

yarn add @react-navigation/stack

好了，以上就是需要安装的内容，接下来我就给个简单示例：

import 'react-native-gesture-handler';
import React, {
    
     Component } from 'react';
import {
    
     NavigationContainer } from '@react-navigation/native';
import {
    
     createStackNavigator } from '@react-navigation/stack';
import Home from './src/Home';

const Stack = createStackNavigator();
export default class App extends Component {
    
    
  render(){
    
    
    return (
      <NavigationContainer>
        <Stack.Navigator>
            <Stack.Screen name="首页" component={
    
    Home} />
        </Stack.Navigator>
      </NavigationContainer>
    )
  };
};

上面就是一个最简单的带头部导航的页面，后面我将写页面之间的跳转，更复杂的一些导航。