本系列旨在展示我如何使用react-native构建一个应用程序以服务WordPress博客中的内容。 由于我的博客谈论的是本机反应&＃xff0c;因此该系列和文章相互联系。 我们将学习如何设置许多使我们的生活舒适的程序包&＃xff0c;并学习如何处理WordPress API。 在此&＃xff0c;本书中讨论的最突出的功能是深色主题&＃xff0c;脱机模式&＃xff0c;无限滚动等。 您可以在本系列中找到更多。 本教程系列的灵感来自instamobile的React Native App模板
如果想从头开始学习&＃xff0c;可以在下面找到本教程系列的所有先前部分&＃xff1a;
- 使用React Native&＃xff03;1构建WordPress客户端应用程序&＃xff1a;概述
- 使用React Native&＃xff03;2构建WordPress客户端应用程序&＃xff1a;设置环境
现在&＃xff0c;我们需要使用所有文件和文件夹来组织我们的项目结构&＃xff0c;并设置导航。
为此&＃xff0c;我们将安装react-navigation软件包版本4及其所有必需的依赖软件包。 最近&＃xff0c;反应导航软件包提供的大多数组件和模块已被分为不同的软件包。 因此&＃xff0c;我们还需要安装其他软件包才能使导航功能完全正常运行。 为此&＃xff0c;我们需要在项目存储库中运行以下命令&＃xff1a;
yarn add react-native-gesture-handler react-native-reanimated react-native-screens
在这里&＃xff0c;我们已经安装了react-navigation软件包以及react-navigation-stack和react-navigation-tabs软件包。 react-navigation-stack程序包使我们能够创建应用程序屏幕的导航器堆栈。 react-navigation-tabs软件包使我们能够在主屏幕上创建底部的标签导航。
现在&＃xff0c;我们还需要安装必需的依赖项才能正确运行react-navigation软件包&＃xff0c;因此&＃xff0c;我们还需要安装以下软件包&＃xff1a;
在这里&＃xff0c;我们安装了三个组件&＃xff0c;以使响应导航平稳运行。 对于Android&＃xff0c;某些软件包需要一些额外的配置。 为此&＃xff0c;我们可以按照文档中的说明进行操作。 并且&＃xff0c;对于Android&＃xff0c;如果react-native的版本小于0.60&＃xff0c;则可能需要链接软件包。 为此&＃xff0c;我们可以为每个包运行以下代码&＃xff1a;
如果是iOS&＃xff0c;我们需要导航到“ ./ios/”文件夹&＃xff0c;然后运行以下命令&＃xff1a;
要完成Android的react-native-gesture-handler的安装&＃xff0c;请对MainActivity.java进行以下修改&＃xff1a;
package com.reactnavigation.example;import com.facebook.react.ReactActivity;&＃43; import com.facebook.react.ReactActivityDelegate;&＃43; import com.facebook.react.ReactRootView;&＃43; import com.swmansion.gesturehandler.react.RNGestureHandlerEnabledRootView;public class MainActivity extends ReactActivity {&＃64;Overrideprotected String getMainComponentName () {return "Example" ;}&＃43; &＃64;Override&＃43; protected ReactActivityDelegate createReactActivityDelegate () {&＃43; return new ReactActivityDelegate( this , getMainComponentName()) {&＃43; &＃64;Override&＃43; protected ReactRootView createRootView () {&＃43; return new RNGestureHandlerEnabledRootView(MainActivity. this );&＃43; }&＃43; };&＃43; }}
然后&＃xff0c;我们可以在相应的模拟器中重新运行我们的项目。
对于这些屏幕&＃xff0c;我们将首先创建四个屏幕&＃xff0c;如下面的屏幕快照所示&＃xff1a;
然后&＃xff0c;我们需要向每个屏幕文件添加默认的react native模板。 下面的代码段提供了Bookmark.js文件的默认react本机代码&＃xff1a;
import React, {Component} from &＃39;react&＃39; ;import {View, Text} from &＃39;react-native&＃39; ;class Bookmark extends Component {constructor (props) {super (props);this .state &＃61; {};}render() {return ( Bookmark );}}export default Bookmark;
同样&＃xff0c;我们可以仅在更改类名称的情况下将默认模板添加到每个屏幕。
接下来&＃xff0c;我们需要打开App.js文件并进行以下导入&＃xff1a;
import React, { Component } from &＃39;react&＃39; ;import {createAppContainer, createSwitchNavigator} from &＃39;react-navigation&＃39; ;import {createBottomTabNavigator} from &＃39;react-navigation-tabs&＃39; ;import {createStackNavigator} from &＃39;react-navigation-stack&＃39; ;import Home from &＃39;./src/screens/Home&＃39; ;import Categories from &＃39;./src/screens/Categories&＃39; ;import Setting from &＃39;./src/screens/Setting&＃39; ;import Bookmark from &＃39;./src/screens/Bookmark&＃39; ;
在这里&＃xff0c;我们从下面安装的包中导入了配置导航所需的各个组件。 我们还导入了屏幕文件。
然后&＃xff0c;我们将使用react-navigation-tabs包中的createBottomTabNavigator函数创建底部的标签导航器。 下面的代码段提供了总体实现&＃xff1a;
const DashboardTabNavigator &＃61; createBottomTabNavigator({HomePage : {screen : Home,navigationOptions : {tabBarLabel : &＃39;Home&＃39; ,},},Categories : {screen : Categories,navigationOptions : {tabBarLabel : &＃39;Categories&＃39; ,},},Bookmark : {screen : Bookmark,navigationOptions : {tabBarLabel : &＃39;BookMark&＃39; ,},},Setting : {screen : Setting,navigationOptions : {tabBarLabel : &＃39;Setting&＃39; ,},},},{navigationOptions : ( {navigation} ) &＃61;> {const {routeName} &＃61; navigation.state.routes[navigation.state.index];return {headerTitle : routeName};},},);
在这里&＃xff0c;我们还定义了底部标签导航器中的每个屏幕以及图标。 然后&＃xff0c;我们还在navigationOptions对象中为每个路由配置了标题。
现在&＃xff0c;我们需要创建堆栈导航器并向其添加底部导航器。 为此&＃xff0c;我们需要利用react-navigation-stack包提供的createStackNavigator函数&＃xff0c;如下面的代码片段所示&＃xff1a;
const StackNavigator &＃61; createStackNavigator({DashboardTabNavigator : DashboardTabNavigator,});export default createAppContainer(StackNavigator);
然后&＃xff0c;最后&＃xff0c;我们需要注册我们的堆栈导航器以从react-navigation包中创建createAppContainer方法并将其导出。
因此&＃xff0c;我们将在仿真器屏幕中获得以下结果&＃xff1a;
摘要
在本章中&＃xff0c;我们学习了如何使用所有依赖包来设置react-navigation包。 然后&＃xff0c;使用这些软件包&＃xff0c;我们学习了如何在项目中设置底部的标签导航。
From: https://hackernoon.com/build-a-wordpress-app-with-react-native-3-the-navigation-qs1r32je
京公网安备 11010802041100号