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>
  );
}

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

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

文章作者: Caesar
文章链接: https://pcnto.com/daily-learning/33-react-native-react-navigation.html
版权声明: 本博客所有文章除特别声明外,转载请注明来自 Peng blog

如果您喜欢本站,你可以点击主页广告以示支持,谢谢。

广告是本站收益的来源希望您能够谅解。