React Native | Meteor 指南

React Native 已发展成为构建原生应用最流行的平台之一，被特斯拉、Instagram 和 Facebook 等公司用于生产环境。React Native 允许您使用 JavaScript 编写应用，并使用原生代码渲染。它拥有您在使用 Meteor 时看重的许多特性，例如保存时的即时刷新。

您可以轻松地将您的 React Native 应用与 Meteor 集成，使用与 Meteor + React Web 应用相同的方法。该集成支持大多数 Meteor 功能，包括方法、发布/订阅和密码账户，并且与react-meteor-data的使用方式相同。

React Native 入门

React Native 项目使用相同的 React 原则进行编码，但与您的 Meteor 项目具有完全独立的代码库。

正在开发一系列 NPM 包，以便于您将 React Native 与 Meteor 集成。为了将 React Native 与 Meteor 一起使用，您需要创建一个 React Native 应用，并使用@meteorrn/core包将其连接到您的 Meteor 服务器。@meteorrn/core包包含 Meteor、MongoDB、withTracker、账户等。

对于大多数项目，由于您的原生应用将显示与 Meteor Web 应用相同的数据并调用相同的方法，因此创建连接到 Meteor 服务器的 React Native 应用不需要对您的 Meteor 代码库进行任何更改。

您唯一需要更改 Meteor 代码库的时间是启用特定于您的原生应用的某些功能。例如，如果您想向您的原生应用添加推送通知，则需要在您的 Meteor 应用上创建一个方法来存储用户的原生推送令牌。

有两种方法可以开始使用 React Native。您可以使用“原生”React Native，也可以使用Expo。Expo 是一套围绕 React Native 构建的工具。您甚至可以使用Expo Snack从 Web 浏览器中试用 React Native。您甚至不需要安装 XCode 或 Android Studio 即可开始使用 Expo。

以下是使用 Expo 的缺点

您无法添加使用原生代码（Java、Swift 等）的原生模块
您无法使用需要链接的包（这些是包含原生代码的 npm 模块，允许您访问原生功能，例如相机、推送通知、指纹身份验证等）。
使用 Expo 的应用比纯 React Native 应用大得多

Expo 提供了一些原生功能（点击此处查看完整列表），但是，如果缺少您需要的功能，您可能需要使用 npm 包或您自己的自定义原生代码。

您可以将您的应用从 Expo “弹出”以利用原生 React Native 功能，但是弹出操作不容易撤消。

React Native 文档允许您在 Expo（“Expo CLI”）和原生 React Native（“React Native CLI”）设置说明之间进行选择。您可以通读安装说明，并决定哪个选项更适合您。

以下是 React Native 入门文档的链接：https://reactnative.net.cn/docs/environment-setup

设置好环境并在您的设备或模拟器上运行应用后，您可以继续执行本指南的下一步：“Meteor React Native 安装”

Meteor React Native 安装

要安装@meteorrn/core包，请在您的 React Native 项目中运行以下命令

npm install --save @meteorrn/core

您还需要确认已安装包的同级依赖项

确认您已安装@react-native-community/netinfo
确认您已安装@react-native-async-storage/async-storage@>=1.8.1。如果您使用的是 Expo，或者无法使用@react-native-async-storage/async-storage，请参阅这些说明。

@meteorrn/core包使您的 React Native 应用能够与您的 Meteor 服务器建立 DDP 连接，以便它可以接收来自发布的数据并调用服务器方法。它还提供对核心 Meteor 客户端方法（如Accounts.createUser和Meteor.loginWithPasword）的访问，并允许您使用withTracker方法在您的应用中显示数据。

注意：如果您的 React Native 应用使用的是 0.59 或更低版本，则@meteorrn/core 包包含重大更改。请改用react-native-meteor。

设置

首先，导入Meteor、withTracker和Mongo

import Meteor, { Mongo, withTracker } from '@meteorrn/core';

接下来，您需要连接到您的 Meteor 服务器。这通常应该在您的 App.jsx 的开头。

Meteor.connect("wss://myapp.meteor.com/websocket");

定义您的集合

const Todos = new Mongo.Collection("todos");

现在您已准备好开始编码。

使用 Meteor React Native 编码

如果您以前使用过 React，那么使用 React Native 进行编码非常简单。但是，我们使用的是View和Text，而不是像div和span这样的组件。您可以此处了解 React Native 的基础知识。

Meteor React Native 的用法旨在尽可能接近meteor/react-meteor-data和 Meteor 核心。它提供了一个withTracker方法。该包还完全支持账户，包括Meteor.loginWithPassword、Meteor.user、Accounts.createUser、Meteor.loggingIn、Accounts.forgotPassword等。

const MyAppContainer = withTracker(() => {
    
    const myTodoTasks = Todos.find({completed:false}).fetch();
    const handle = Meteor.subscribe("myTodos");
    
    return {
        myTodoTasks,
        loading:!handle.ready()
    };
    
})(MyApp);

渲染少量数据时，可以使用数组映射方法

import { View, ScrollView, Text } from 'react-native';

class MyApp extends React.Component {
    render() {
        const { loading, myTodoTasks } = this.props;
        
        if(loading) {
            return <View><Text>Loading your tasks...</Text></View>
        }
        
        return (
            <ScrollView>
                {!myTodoTasks.length ?
                    <Text>You don't have any tasks</Text>
                :
                    myTodoTasks.map(task => (
                        <Text>{task.text}</Text>
                    ))
                }
            </ScrollView>
        );
    }
}

如果您要渲染大量数据，则应使用FlatList组件。

结论

以下是一些供进一步阅读的有用链接

您可以在此处查看使用MeteorRN构建的示例组件列表。

您可以在meteor-react-native 仓库上查看MeteorRN的完整 API 文档

您可以在此处查看官方 React Native API 文档

HackerNoon 上的“如何设置您的第一个应用”

WixEngineering 上的“完整的 React Native 布局备忘单”

在 GitHub 上编辑