React Native的导航配置React Navigation

昨天已经搭建了一个React Native项目，今天就来试试React Native Tab navigation

废话不多说开始

这个导航库是官方推荐的一个很好用，地址：https://reactnavigation.org/

npm install @react-navigation/native
# 或者
yarn add @react-navigation/native

如果你是新项目咱们还是一步到位，省的出现依赖错误问题

npm install react-native-screens react-native-safe-area-context
# 或者
yarn add react-native-screens react-native-safe-area-context

如果你的React Native项目是0.60或者更高版本就不需要

react-native link

别急记得配置一下Android，目录是 AwesomeProject\android\app\src\main\java\com\awesomeproject\MainActivity.java

package com.awesomeproject;

import android.os.Bundle;

import com.facebook.react.ReactActivity;

public class MainActivity extends ReactActivity {

  /**
   * Returns the name of the main component registered from jаvascript. This is used to schedule
   * rendering of the component.
   */
  @Override
  protected String getMainComponentName() {
    return "AwesomeProject";
  }

  @Override
  protected void onCreate(Bundle savedInstanceState) {
    super.onCreate(null);
  }
}

我这里贴出我放的位置，可以参考

import * as React from 'react';
import { NavigationContainer } from '@react-navigation/native';

export default function App() {
  return (
    <NavigationContainer>{/* Rest of your app code */}</NavigationContainer>
  );
}

我这有点照搬官方例子了，但是其实就是这些东西，大家可以去看看，文章开头的链接

如果上面你发现错误，还望指正，小弟在此谢过