移动端混合开发(二)

CharlesGao
672 阅读6分钟

上篇文章给大家讲解了 RN 开发的基础环境搭建等知识, 感兴趣的同学可以去看看.

移动端混合开发(一)

本篇文章继续讲解RN 开发所用到的其他知识, 主要是组件和导航的讲解.

组件

组件, 顾名思义就是组成用户界面的控件. 在移动端原生开发中, 系统也给我们提供了不同的组件用以搭建用户界面, 但是对于不同的开发平台, 组件的用法和定义也是不同的, 既然RN能够跨平台开发, 那么它是如何解决不同平台组件之间的差异的呢?

从上一篇文章中提到的 App.js 文件中我们可以看到: RN 使用了 XML 格式来搭建用户界面(注意不是HTML格式), RN 将这种在函数中返回 XML 格式的写法称为 JSX。Android 和 iOS 的 Storyboard 也使用 XML 搭建用户界面, 说明 XML 格式得到了大家的一致认可。 但细心的你可能已经发现 RN 在描述组件的外观、位置等方面似乎又借鉴了 CSS 的写法。 没错， RN 本身源于 React (一个前端快速开发框架), 所以 React 开发中所使用的技术习惯被保留了下来。 不过不同是：在CSS 3 中属性的命名单词之间是以 - 分隔, 而在 RN 中则是以驼峰命名法来书写, 这里读者们要特别注意, 举个例子:

在 CSS 中, 我们一般这样书写:

container: { flex: 1, justify-content: 'center', align-items: 'center', background-color: '#f5fcff', }

而在 RN 中, 我们则这样写:

container: { flex: 1, justifyContent: 'center', alignItems: 'center', backgroundColor: '#F5FCFF', }

明白了 RN 是如何定义组件之后, 我们来看看它都提供了哪些组件。

基础组件

大多数应用都会用到的基础组件。如果你刚刚开始学习RN，那么一定要好好熟悉一下他们：

  • View 搭建用户界面的基础组件，一般用做外层嵌套的父组件或者自定义组件。
  • Text 显示文本内容的组件
  • Image 显示图片内容的组件
  • TextInput 文本输入框
  • ScrollView 可滚动的视图容器
  • StyleSheet 提供类似CSS样式表的样式抽象层（说人话：其实就是用来定义组件的样式的）

交互组件

所有App 都需要与用户交互，这是毋庸置疑的，RN 提供了以下常用的跨平台交互控件。

  • Button 按钮，是我们再熟悉不过的交互控件了，它主要用来响应用户的点击操作，但是要注意：在RN中 Button 是没有style属性的，也就是说我们不能直接更改 Button 控件的长宽、背景色等等属性。如果你想要自定义一个 Button的话，建议你使用 Touchable 组件。
  • Picker 选择器控件，在iOS和Android上调用各自原生的选择器
  • Slider 滑动数值选择器，例如调节屏幕亮度，调整播放器音量等功能会经常用到。
  • Switch 选择器开关
  • ScrollView

列表视图

既然已经有可以滚动的视图容器 ScrollView 了，为什么还要有列表视图呢？这是因为 ScrollView 会直接渲染所有内部组件，所以在加载大量数据时会消耗大量性能，可能会造成 App 卡顿甚至崩溃，所以分步渲染的 FlatList 和SectionList 应运而生了。

  • FlatList 可滚动列表组件（只渲染当前屏幕可见的元素）
  • SectionList 与 FlatList 类似，不过多了分组显示功能

当然除了以上提到的常用组件外，RN 根据不同平台的特色还为他们专门定制了平台独有组件，这里我们就不一一介绍了，感兴趣的同学可以点击这里查看，接下来我们来看看导航。 ##导航 大多数 App 都是由若干个页面组成的，页面之间如何切换、跳转既是开发人员需要付出聪明才智的地方，同时也是用户能否顺畅地使用 App 的关键，而这都离不开一个东西，那就是导航。

与原生开发不同，RN 的导航其实都在一个原生页面中进行，所谓页面之间的切换跳转都只是一种错觉，所以导航是无法直接调用系统原生的，我们只能借助于 RN 给我们提供的方法。最开始RN 提供了一个叫 Navigator 的控件用来做导航控制，然鹅后来由于 Bug 太多、使用不便等原因，连官方都不好意思推荐大家使用了🙃🙃，转而安利开发者们使用一个叫 React Navigation 的第三方开源控件，那么接下来我们就给大家讲一讲 react-native-router-flux 如何使用（好像哪里不对？）。

其实很简单，react-native-router-flux 是 React Navigation 的再次封装，为了大家能更方便的使用 React Navigation，作者aksonov可谓是煞费苦心，不但封装了很多 React Navigation 复杂的功能，甚至还顺手修改了其中的不少Bug🤔🤔，这样良心的Up主大家不关注一波吗？

安装 react-native-router-flux

想要使用react-native-router-flux，我们可以使用 npm 安装，首先进入你的项目所在目录，然后执行

npm i react-native-router-flux --save

安装成功后我们就可以使用了，那如何使用呢？ 假如现在有三个页面 欢迎页-> 登录页->App 主页， 其中欢迎页展示1.5秒自动进入登录页，登录页点击登录按钮进入App 主页，如何做导航呢？ 首先我们把 App.js 改造一下，不再让它显示内容，而是作为导航的根容器，代码如下：

import React, {Component} from 'react';
import {Actions, Router, Scene} from 'react-native-router-flux';
import WelcomePage from "./app/components/WelcomePage";
import LoginPage from "./app/components/LoginPage";
import IndexPage from "./app/components/IndexPage";

type Props = {};
export default class App extends Component<Props> {
  render() {
    return (
        <Router>
            <Scene key="root">
                <Scene key="welcome"
                       component={WelcomePage}
                       hideNavBar
                       initial/>

                <Scene key="login"
                       component={LoginPage}
                       hideNavBar/>

                <Scene key="index"
                       component={IndexPage}
                       hideNavBar/>
            </Scene>
        </Router>
    );
  }
}

可以看到，我们在 render() 函数中返回的不再是布局代码，而是( router 本身有“路由器”的意思)，Router里面又嵌套了一层( scene 意为“场景”)，里面又有三个小的，从代码中我们可以看到，这正是我们需要的三个页面，的常见属性有：

  • key 场景的键值，主要用于调起新页面，例如
Actions.reset("login");
  • component 该场景想要显示的组件，例如 key="welcome" 的场景想要显示的组件为 WelcomePage ，而 WelcomePage 就是 /app/components/ 目录下的 WelcomePage.js 。
  • hideNavBar 很好理解，就是隐藏导航栏的意思。
  • initial 顾名思义，就是表明该场景是第一个显示的。
  • backTitle 定义返回按钮上的文字

除了这些经常会用到的属性外，场景还提供了很多可以定制或修改导航栏的属性，想要了解这些属性的同学可以点击这里进行查阅，当然除了页面间的导航之外，react-native-router-flux 还可以定义标签页导航（Tabs），抽屉式导航（Drawer)等多种导航方式，只要灵活运用，绝大部分导航问题都可以解决，话不多说，赶快用起来吧～

avatar
文章
阅读
粉丝