如何使用Realm项目文件组织React Native？ [英] How to organize React Native with Realm project files?

问题描述

我已经选择了在我的React Native应用程序中存储数据的领域。我不明白，如何在我的项目中组织文件。文档仅提供一个组件的简单代码。但是我需要不同组件的数据库的不同部分。

I've picked realm to store data in my React Native app. I don't understand, how to organize files in my project. Documentation provides only simple code for one component. But I need for different components different parts of database.

我在一个存储库中看到，其中所有方案都传递给configureRealm.js文件中的数组：

I seen in one repository, where all schemes was passed to array in "configureRealm.js" file:

new Realm({schema: [Dogs, Cats]});

我也发现，我可以在scheme目录中放置不同的方案，例如将它们导入我需要的地方。

Also I've found, that I can put different schemes in "schemes" directory, for example and import them where I need.

例如在Cats.js中我可以做出反应组件：

For example in "Cats.js" react component I can do:

import Cats from 'schemes/Cats';

this.realm = new Realm({schema: [Cats]});

并在Dogs.js导入狗并使用此方案初始化领域。

And in "Dogs.js" import dogs and initialize realm with this scheme.

但我不确定第一次和我的方式。什么是正确的，组织领域的最佳方式是对本机应用程序做出反应？

But I am not sure in first and in mine way. What will be right and the best way to organize realm react native application?

推荐答案

我最近开始组织我的App / Data结构这个，在与Realm打交道之后，从一个比我更聪明的人得到一些指示:)我没有详细介绍最初如何创建领域，因为我认为你已经处理了这个问题。这只是组织/分区开发的一个非常可靠的结构。希望它有所帮助！

I recently began organizing my App/Data structure like this, when dealing with Realm, after getting some direction from someone much smarter than I :) I did not go into too much detail about how the Realms are initially created, as I assume you are handling that already. This is just a really solid structure for organization/compartmentalized development. Hope it helps!

.App
    ├──Assets
    ├──Data
    |   ├──Db
    |   |   ├──Db.js
    |   |   ├──DbHelper.js
    |   ├──Models
    |   |   ├──ModelA.js
    |   |   ├──ModelB.js
    |   |   ├──ModelC.js
    |   ├──Queries.js
    ├──Scenes
    |   ├──App.js
    |   |   ├──(all other scene/view components)

- Models目录包含我的所有模式，像这样单独分解：

--The Models directory contains all my schemas, broken out individually like this:

import Realm from 'realm';
export default class ModelA extends Realm.Object {}
ModelA.schema = {
    name: 'ModelA',
    primaryKey: 'id',
    properties: {
        one: {type: 'int', optional: true},
        two: 'string',
        three: {type: 'string', optional: true},
    }
}

- 在 Db.js ，我保留了所有与标准Realm相关的方法。 createRealm（）， write（）， close（） ， insert（），以及一般的查询方法，如下所示：

--In Db.js, I keep all my standard Realm related methods. createRealm(), write(), close(), insert(), and a generic query method, like this:

query(model: string, filter?: string) {
    let results = this.realm.objects(model);
    if(filter) {
        return results.filtered(filter);
    }
    return results;
}

- DbHelper.js 然后导入 Db.js 和我的所有模型。它使用 Db.js 中的标准方法处理我的数据库实例的设置和获取，如下所示：

--DbHelper.js then imports Db.js and all my Models. It handles the setting and getting of my db instance(s), using the standard methods from Db.js, like this:

import Db from 'App/Data/Db/Db';
import ModelA from 'App/Data/Models/ModelA';
import ModelB from 'App/Data/Models/ModelB';
import ModelC from 'App/Data/Models/ModelC';

class DbHelper {

    modelSchema = [
        ModelA,
        ModelB,
        ModelC
    ];

    activeInstancePath = (myLocalRealmPath)

    getInstance(): Db {
        let instance: Db = this.activeInstancePath;
        if(!instance) {
            throw new Error('DbHelper.js :: Active Instance Not Set!');
        }
        return instance;
    }

    /* note: this is where you would also setInstance and define a constant, or other method for the instance path */
}

- Queries.js 然后导入 DbHelper。 JS 。 Queries.js 包含特定应用相关数据查询的所有方法。 Queries.js 是我需要导入我的 Scene 组件，以获取Realm数据。我的 Queries.js 看起来像这样：

--Queries.js then imports DbHelper.js. Queries.js contains all my methods for specific app related data queries. Queries.js is all I need to import into my Scene components, to obtain Realm data. My Queries.js looks something like this:

import DbHelper from 'App/Data/Db/DbHelper';

class Queries {

    /* a typical query */
    getSomeDataFromModelA(filterValue: string = null) {
        let filter = null;
        if (filterValue) {
            filter = `two = ${filterValue}`;
        }
        let results = DbHelper.getInstance()
            .query('ModelA', filter);

        return results;
    }

    /* return some JSON data that we originally stored in the Realm as a string */
    getSomeJsonData() {
        let results = DbHelper.getInstance()
            .query('ModelB');

        if(results.length) {
            let parsed = JSON.parse(results[0].objectA);
            return parsed.objectB;
        }
        return null;
    }
}
export default new Queries();

- App.js。所以现在，在我的应用场景中我会做这样的事情：

--App.js. So now, in my App Scene I would simply do something like this:

import React, { Component } from 'react';
import { View, Text } from 'react-native';
import Queries from 'App/Data/Queries';

class App extends Component {

    constructor(props) {
        super(props);

        // Get Some Realm Data!
        let modelAData = Queries.getSomeDataFromModelA()
        let someJsonData = Queries.getSomeJsonData();

        // Set Initial state
        this.state = {
            modelData: modelAData,
            jsonData: someJsonData
        }
    }

    componentDidMount() {
        console.log(this.state.modelData);
    }

    render() {
        return(
            <View>
                <Text>{this.state.jsonData.objectKey}</Text>
            </View>
        );
    }
}

export default App;

这篇关于如何使用Realm项目文件组织React Native？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！