如何使用React Native Part＃3构建WordPress应用：导航

最新推荐文章于 2024-10-05 08:45:32 发布

dfsgwe1231

最新推荐文章于 2024-10-05 08:45:32 发布

阅读量217

点赞数

文章标签： php javascript 移动开发 ViewUI

本系列旨在展示我如何使用react-native构建一个应用程序以服务WordPress博客中的内容。由于我的博客谈论的是本机反应，因此该系列和文章相互联系。我们将学习如何设置许多使我们的生活舒适的程序包，并学习如何处理WordPress API。在此，本书中讨论的最突出的功能是深色主题，脱机模式，无限滚动等。您可以在本系列中找到更多。本教程系列的灵感来自instamobile的React Native App模板

如果想从头开始学习，可以在下面找到本教程系列的所有先前部分：

现在，我们需要使用所有文件和文件夹来组织我们的项目结构，并设置导航。

为此，我们将安装react-navigation软件包版本4及其所有必需的依赖软件包。最近，反应导航软件包提供的大多数组件和模块已被分为不同的软件包。因此，我们还需要安装其他软件包才能使导航功能完全正常运行。为此，我们需要在项目存储库中运行以下命令：

yarn add react-native-gesture-handler react-native-reanimated react-native-screens

在这里，我们已经安装了react-navigation软件包以及react-navigation-stack和react-navigation-tabs软件包。 react-navigation-stack程序包使我们能够创建应用程序屏幕的导航器堆栈。 react-navigation-tabs软件包使我们能够在主屏幕上创建底部的标签导航。

现在，我们还需要安装必需的依赖项才能正确运行react-navigation软件包，因此，我们还需要安装以下软件包：

react-native link <package-name>

在这里，我们安装了三个组件，以使响应导航平稳运行。对于Android，某些软件包需要一些额外的配置。为此，我们可以按照文档中的说明进行操作。并且，对于Android，如果react-native的版本小于0.60，则可能需要链接软件包。为此，我们可以为每个包运行以下代码：

react-native link <package-name>

如果是iOS，我们需要导航到“ ./ios/”文件夹，然后运行以下命令：

cd ios ; pod install

要完成Android的react-native-gesture-handler的安装，请对MainActivity.java进行以下修改：

package com.reactnavigation.example;
    import com.facebook.react.ReactActivity;
    + import com.facebook.react.ReactActivityDelegate;
    + import com.facebook.react.ReactRootView;
    + import com.swmansion.gesturehandler.react.RNGestureHandlerEnabledRootView;
    public class MainActivity extends ReactActivity  {
      @Override
      protected String getMainComponentName ()  {
        return "Example" ;
      }
    +  @Override
    +  protected ReactActivityDelegate createReactActivityDelegate ()  {
    +    return new ReactActivityDelegate( this , getMainComponentName()) {
    +      @Override
    +      protected ReactRootView createRootView ()  {
    +       return new RNGestureHandlerEnabledRootView(MainActivity. this );
    +      }
    +    };
    +  }
    }

然后，我们可以在相应的模拟器中重新运行我们的项目。

对于这些屏幕，我们将首先创建四个屏幕，如下面的屏幕快照所示：

然后，我们需要向每个屏幕文件添加默认的react native模板。下面的代码段提供了Bookmark.js文件的默认react本机代码：

 import React, {Component} from 'react' ;
    import {View, Text} from 'react-native' ;
    class Bookmark extends Component  {
      constructor (props) {
        super (props);
        this .state = {};
      }
      render() {
        return (
          < View >
             <Text> Bookmark </Text> 
          </ View >
        );
      }
    }
    export default Bookmark;

同样，我们可以仅在更改类名称的情况下将默认模板添加到每个屏幕。

接下来，我们需要打开App.js文件并进行以下导入：

import React, { Component } from 'react' ;
    import {createAppContainer, createSwitchNavigator} from 'react-navigation' ;
    import {createBottomTabNavigator} from 'react-navigation-tabs' ;
    import {createStackNavigator} from 'react-navigation-stack' ;
    import Home from './src/screens/Home' ;
    import Categories from './src/screens/Categories' ;
    import Setting from './src/screens/Setting' ;
    import Bookmark from './src/screens/Bookmark' ;

在这里，我们从下面安装的包中导入了配置导航所需的各个组件。我们还导入了屏幕文件。

然后，我们将使用react-navigation-tabs包中的createBottomTabNavigator函数创建底部的标签导航器。下面的代码段提供了总体实现：

const DashboardTabNavigator = createBottomTabNavigator(
      {
        HomePage : {
          screen : Home,
          navigationOptions : {
            tabBarLabel : 'Home' ,
          },
        },
        Categories : {
          screen : Categories,
          navigationOptions : {
            tabBarLabel : 'Categories' ,
          },
        },
        Bookmark : {
          screen : Bookmark,
          navigationOptions : {
            tabBarLabel : 'BookMark' ,
          },
        },
        Setting : {
          screen : Setting,
          navigationOptions : {
            tabBarLabel : 'Setting' ,
          },
        },
      },
      {
        navigationOptions : ( {navigation} ) => {
          const {routeName} = navigation.state.routes[navigation.state.index];
          return {
            headerTitle : routeName
          };
        },
      },
    );

在这里，我们还定义了底部标签导航器中的每个屏幕以及图标。然后，我们还在navigationOptions对象中为每个路由配置了标题。

现在，我们需要创建堆栈导航器并向其添加底部导航器。为此，我们需要利用react-navigation-stack包提供的createStackNavigator函数，如下面的代码片段所示：

const StackNavigator = createStackNavigator({
      DashboardTabNavigator : DashboardTabNavigator,
    });
    export default createAppContainer(StackNavigator);

然后，最后，我们需要注册我们的堆栈导航器以从react-navigation包中创建createAppContainer方法并将其导出。

因此，我们将在仿真器屏幕中获得以下结果：