Разрабатывайте собственные реактивные компоненты и публикуйте их в npm.

Git Android NPM React Native

написать впереди

делаетreact-nativenpm install

Итак, сегодня я использую один, разработанный мной вiosа такжеandroidобщийCardViewВзяв в качестве примера компоненты, давайте поговорим о том, как разработать собственный компонент, открыть его исходный код на github и опубликовать в npm.

описание

мой компонент называетсяreact-native-rn-cardview. Если это появляется в учебникеreact-native-cardviewИмена компонентов имеют одинаковое значение.

1. Создайте и внедрите

1.1 Создание проекта шаблона пользовательского компонента

1.1.1 Установкаreact-native-create-library 

$ npm install -g react-native-create-library

1.1.2 Создание шаблона проекта

мы используем командуreact-native-create-libraryСоздайте проект и укажите платформу какios,androidУточнитьandroidсерединаpackage, другие параметры могут относиться кreact-native-create-libraryсуществуетgithubДокументация по вышеизложенному, я не буду здесь вдаваться в подробности.

$ react-native-create-library --package-identifier com.quenice.cardview --platforms android,ios cardview

Давайте переименуем проект

$ mv cardview react-native-cardview

Некоторые люди могут сказать, почему арендодатель не генерируетreact-native-cardviewcardviewПереименовать еще раз. На самом деле это небольшая хитрость, т.к.react-native-create-libraryДля производственных проектов некоторые имена или классы, связанные с компонентами, будут добавлены по умолчанию.react-nativeилиRNприставка.
Например, если ваше исходное имя проектаreact-native-card-view,Такpackage.jsonКомпонент определяется имяreact-native-react-native-card-view, соответствующий класс, определенный в модуле Android, будетRNReactNativeCardviewModule.java, что явно некрасиво.

хорошо, продолжим.

Текущая структура каталогов:

$ tree

└── react-native-cardview
    ├── README.md
    ├── android
    │   ├── build.gradle
    │   └── src
    │       └── main
    │           ├── AndroidManifest.xml
    │           └── java
    │               └── com
    │                   └── reactlibrary
    │                       ├── RNCardviewModule.java
    │                       └── RNCardviewPackage.java
    ├── index.js
    ├── ios
    │   ├── RNCardview.h
    │   ├── RNCardview.m
    │   ├── RNCardview.podspec
    │   ├── RNCardview.xcodeproj
    │   │   └── project.pbxproj
    │   └── RNCardview.xcworkspace
    │       └── contents.xcworkspacedata
    └── package.json

После создания компонентного проекта вы можете начать запись кода реализации

2 Напишите код

Написание кода разделено на три части: одна часть — собственный код Android, одна часть — собственный код iOS, а одна часть — код реакции (или javascript). из-заreact-native-cardviewЭто касается только нативных модулей Android, поэтому в этой статье пока не рассматривается разработка нативных модулей iOS.Если вам интересно, я могу открыть другую статью, чтобы поговорить о нативных модулях iOS.

2.1 Написать собственный модуль Android

Для написания собственного кода Android обычно требуются следующие три класса:

2.1.1 RNxxxModule

Основная функция этого класса — определить собственное имя модуля, которое можно передать непосредственно в javascript.React.NativeModules.xxxпосетить, гдеxxxвRNxxxModuleОпределяется в классеgetNameвозвращаемое значение метода. Ниже приведены мои компонентыreact-native-cardviewКласс модуля в

RNCardViewModule.java

package com.quenice.reactnative;

import com.facebook.react.bridge.ReactApplicationContext;
import com.facebook.react.bridge.ReactContextBaseJavaModule;
import com.facebook.react.bridge.ReactMethod;
import com.facebook.react.bridge.Callback;

public class RNCardViewModule extends ReactContextBaseJavaModule {

  private final ReactApplicationContext reactContext;

  public RNCardViewModule(ReactApplicationContext reactContext) {
    super(reactContext);
    this.reactContext = reactContext;
  }

  @Override
  public String getName() {
    return "RNCardView";
  }
}

2.1.2 RNxxxManager

Класс менеджера в основном является нативной реализацией компонента, и отображает свойства реактивного компонента к нативными свойствами

RNCardViewManager.java

package com.quenice.reactnative;

import android.graphics.Color;
import android.support.v7.widget.CardView;
import android.view.View;

import com.facebook.react.uimanager.PixelUtil;
import com.facebook.react.uimanager.ThemedReactContext;
import com.facebook.react.uimanager.ViewGroupManager;
import com.facebook.react.uimanager.annotations.ReactProp;
import com.facebook.react.views.view.ReactViewGroup;

public class RNCardViewManager extends ViewGroupManager<CardView> {
    @Override
    public String getName() {
        return "RNCardView";
    }

    @Override
    protected CardView createViewInstance(ThemedReactContext reactContext) {
        CardView cardView = new CardView(reactContext);
        cardView.setUseCompatPadding(true);
        cardView.setContentPadding(0, 0, 0, 0);
        ReactViewGroup reactViewGroup = new ReactViewGroup(reactContext);
        cardView.addView(reactViewGroup);
        return cardView;
    }

    @ReactProp(name = "cardElevation", defaultFloat = 0f)
    public void setCardElevation(CardView view, float cardElevation) {
        view.setCardElevation(PixelUtil.toPixelFromDIP(cardElevation));
    }
...
}

2.1.3 RNxxxPackage

Главный модуль пакета для регистрации натурального, реализации нативного компонента, который зарегистрирован выше и класс Module Manager

RNCardViewPackage.java

package com.quenice.reactnative;

import java.util.Arrays;
import java.util.Collections;
import java.util.List;

import com.facebook.react.ReactPackage;
import com.facebook.react.bridge.NativeModule;
import com.facebook.react.bridge.ReactApplicationContext;
import com.facebook.react.uimanager.ViewManager;
import com.facebook.react.bridge.JavaScriptModule;
public class RNCardViewPackage implements ReactPackage {
    @Override
    public List<NativeModule> createNativeModules(ReactApplicationContext reactContext) {
      return Arrays.<NativeModule>asList(new RNCardViewModule(reactContext));
    }

    // Deprecated from RN 0.47
    public List<Class<? extends JavaScriptModule>> createJSModules() {
      return Collections.emptyList();
    }

    @Override
    public List<ViewManager> createViewManagers(ReactApplicationContext reactContext) {
      return Arrays.<ViewManager>asList(new RNCardViewManager());
    }
}

2.2 iOS написана на родном коде

react-native-cardview
iOSreact-nativeсерединаshadowСвязанные свойства могут быть реализованы, поэтому в этой статье они пока не рассматриваются.

2.3 Написать код Reactnative

Хорошо написанandroid/iOSПосле нативного модуля нужно написатьjavascriptкод для мостаreact-nativeс нативными модулями.

RNCardView.android.js

import PropTypes from 'prop-types';
import {requireNativeComponent, View} from 'react-native';

const iface = {
    name: 'CardView',
    propTypes: {
        cardElevation: PropTypes.number,
        maxCardElevation: PropTypes.number,
        backgroundColor: PropTypes.string,
        radius: PropTypes.number,
        ...View.propTypes, // include the default view properties
    },
};

module.exports = requireNativeComponent('RNCardView', iface);

3 Загрузка кода и выпуск компонента

3.1 Загрузите код на github

После написания кода нам нужно загрузить его на Github, а затем нужно использовать адрес github кода при публикации компонента в NPM.
. Если вы еще не выполнили настройку, связанную с github, вы можете обратиться к другой моей статье:Установите и настройте соединение Git GitHub

Выполните следующую команду для синхронизации кода к репозитории, соответствующему вашему GitHub:

$ git add .
$ git commit -a -m "initial commit"
$ git push -u origin master

После синхронизации вы можете зайти на github, чтобы посмотреть, прошел ли пуш успешно:

https://github.com/YourGithubAccount/YourRepository

3.2 Выпуск компонента

После разработки компонента я хочу передать его в другие проекты (или предоставить другим для установки и использования)npm installСпособ установки ваших компонентов, ваша сборка должна быть опубликована в реестре npm.

3.2.1 npm registry

что такое реестр npm

Проще говоря, реестр npm эквивалентен реестру пакетов. Он управляет различными подключаемыми модулями, выпущенными разработчиками по всему миру, и разработчики могутnpm installспособ установки необходимых плагинов.

Официальный реестр npm:registry.npmjs.org/

Быстрее быстрее как:registry.npm.taobao.org/

Проверить

$ npm config get registry

переключать

Конечно, текущий реестр npm можно переключить с помощью команды

# 全局切换
$ npm config set registry http://registry.npmjs.org/

Иногда вам может понадобиться временно переключиться при выполнении определенной команды npm, на этот раз вы можете использовать--registryЧтобы указать реестр для временного переключения, например публикации в npm

$ npm publish --registry http://registry.npmjs.org/

Можно временно назначить, конечно, после окончания выполнения команды реестр все равно вернется в исходный реестр

3.2.2 Создание/вход в учетную запись реестра npm

Чтобы публиковать компоненты в реестре npm, вы должны быть зарегистрированным пользователем реестра npm через:

$ npm adduser

чтобы добавить пользователя, или вы ужеОфициальный сайтЗарегистрированный пользователь может пройти:

$ npm login

для входа в учетную запись реестра npm.

Чтобы подтвердить, создаете ли вы / успешно посадите реестр npm, используйте следующие два способа.

  1. Заказ$ npm whoamiПодтвердите, успешен ли локальный вход в систему и успешна ли аутентификация
  2. открыть онлайнnpmjs.com/~usernameПроверьте, успешно ли создана учетная запись

3.2.3 Подготовка перед выпуском

3.2.3.1 .gitignore и .npmignore

  1. существует.gitignoreОпределите, какие файлы не загружаются на github в
  2. существует.npmignoreКакие файлы не упаковываются при выпуске?
  3. Если есть.gitignoreно ни один.npmignoreфайл, затем.gitignoreможет действовать как.npmignoreроль
  4. Для ознакомления с конкретными правилами см.:npm-developers, .gitignore or .npmignore pattern rules

3.2.3.2 package.json

Файл package.json определяет всю опубликованную информацию, включая: имя компонента, версию, автора, описание, зависимости и другую ключевую информацию. Для получения подробной информации см.Working with package.json

Нижеreact-native-cardviewСодержимое файла package.json:

{
  "name": "react-native-rn-cardview",
  "version": "1.0.0",
  "description": "A ReactNative CardView Component for android and iOS",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "keywords": [
    "react-native",
    "react-component",
    "react-native-component",
    "react",
    "mobile",
    "ios",
    "android",
    "cardview"
  ],
  "author": {
    "name": "quenice",
    "email": "qiubing.it@gmail.com"
  },
  "license": "MIT",
  "repository": {
    "type": "git",
    "url": "git@github.com:quenice/react-native-cardview.git"
  },
  "devDependencies": {
    "react": "^16.2.0",
    "react-native": "^0.53.0"
  },
  "peerDependencies": {
    "react": "^16.2.0"
  },
  "dependencies": {
    "prop-types": "^15.6.0"
  }
}

3.2.3.3 Запись файла readme.md

Способы использования компонентов и меры предосторожности подробно описаны в файле readme.md. Обычно пишется в синтаксисе Markdown

3.2.4 Выпуск

После того, как вышеуказанные приготовления сделаны, вы можете опубликовать его. Здесь следует отметить, что первый выпуск отличается от последующего выпуска обновления.

Первый выпуск

Для первого выпуска выполните команду напрямую:

$ npm publish

Это сделано, вы можете проверить онлайн, чтобы убедиться, что выпуск прошел успешно. Перейдите по ссылке ( — это имя опубликованного вами пакета npm):
Эй, эта лошадь плюс .com/package/
Посмотрите, есть ли уже контент, и если контент есть, значит, релиз прошел успешно.

выпуск обновления

Если это не первый выпуск, необходимо выполнить две команды

$ npm version <update_type>
$ npm publish

$ npm versionКоманда используется для автоматического обновления номера версии,update_typeЗначение имеетpatch ``minor ``major. Так что в каких сценариях вы выбираете то, чтоupdate_typeШерстяная ткань? См. таблицу ниже

update_type Сцены Правила номера версии Пример
- Первый выпуск Номер версии 1.0.0 1.0.0
path При исправлении ошибок и мелких изменениях Инкрементные изменения из 3-й цифры номера версии 1.0.0 -> 1.0.1
minor Когда новая функция запущена и не влияет на существующие функциональные модули текущей версии Инкрементальные изменения со 2-й цифры номера версии 1.0.3 -> 1.1.3
major Когда запускается несколько новых функциональных модулей, которые повлияют на существующие функции текущей версии. Инкрементальные изменения с первой цифры номера версии 1.0.3 -> 2.0.0

Уведомление

Если первый номер версии выпуска не 1.0.0, то$ npm version <update_type>
Обновление сообщит об ошибке, потому что вы не следовали его согласованным правилам версии, в настоящее время вы можете вручную изменитьpackage.jsonсерединаversionПоле представляет собой номер версии, которая соответствует согласованным правилам, а затем выполняется напрямую.$ npm publishВы можете, а затем вы можете использовать его непосредственно в следующий раз, когда будете постепенно обновляться.$ npm version <update_type>способ автоматического обновления номера версии

4 теста

Процесс сборки от разработки до финального релиза, необходимость постоянно тестировать на функциональную целостность, тогда как это тестировать?

4.1 Создайте реактивный проект

Сначала мы создаем реактивный проект с именем example.

$ react-native init example

exampleКаталог проекта можно объединить с каталогом проекта компонента.react-native-cardviewТот же уровень, конечно, вы также можете разместить его в любом месте, где вы хотите.Здесь, для удобства работы, мы поместили два каталога в каталог одного уровня. То есть текущий каталог выглядит так

$ tree
.
├── example
└── react-native-cardview

Затем все, что нам нужно сделать, это установить локальные или опубликованные компоненты наexampleтест в проекте

4.2 Локальное тестирование кода

Прежде чем компонент будет выпущен, мы можем напрямую установить нативный код наexampleЕсть несколько способов тестирования в проекте

4.2.1 yarn link

$ cd react-native-cardview
$ yarn link
$ cd ../example
$ yarn link react-native-cardview
$ react-native link react-native-cardview

Пару очков:

  1. yarn linkзаключается в том, чтобы зарегистрировать локальный код в текущем каталоге с помощью пряжи какreact-native-cardviewЛокальный компонент , имя компонентаreact-native-cardviewНа самом деле, согласноpackage.jsonсерединаnameЗначение поля исходит из имени каталога, но оно точно равно имени каталога.
  2. yarn link react-native-cardviewКоманда состоит в том, чтобы поместить этот локальный компонентreact-native-cardviewустановлен наexampleпроект, вы можетеexample/node_modulesнайти этот компонент в
  3. react-native link react-native-cardviewЭто должен знать каждый, просто сделай этоandroid/iOSСсылка на нативный модуль
  4. фактическиyarn linkПроще говоря, этот метод заключается в выполненииsymbol link, то есть,example/node_modules/react-native-cardview/Содержимое каталога указывает наreact-native-cardview/Содержимое каталога вы меняетеreact-native-cardview/Код в каталоге эквивалентен прямому изменениюexample/node_modules/react-native-cardview/Код в этом каталоге, так что цель изменения кода компонента и просмотра эффекта может быть достигнута.

4.2.2 Настройте локальный путь в package.json

прямо вexampleизpackage.jsonувеличить вdependencies

example/package.json

{
  "name":"example",
  ...
  "dependencies": {
    "react-native": "^0.55.4",
    "react-native-cardview":"file:../react-native-cardview",
    ...
  }
  ...
}

затем выполнить

$ react-native link react-native-cardview

а такжеyarn linkто же самое, это эквивалентно выполнениюsymbol linkПрямая модификацияreact-native-cardview/Код в каталоге эквивалентен прямому изменениюexample/node_modules/react-native-cardview/код в этом каталоге

4.2.3 Прямое копирование нативного кода

Этот метод относительно прост и груб, просто скопируйте напрямуюreact-native-cardview/Содержимое каталога дляexample/node_modules/react-native-cardview/в этом каталоге

$ cp -rf react-native-cardview/ example/node_modules/

затем выполнить

$ react-native link react-native-cardview

Недостатком этого метода является то, что каждый разreact-native-cardview/После завершения кода вам нужно обрабатывать копию наexample/node_modules/react-native-cardview/

4.3 Проверка загруженного/опубликованного кода

Компоненты, которые были загружены на github или опубликованы в реестре npm, можно протестировать так же, как мы обычно устанавливаем сторонний компонент.

4.3.1 Через гитхаб

Добавьте свой код и загрузите его в репозиторий github через git, после чего вы сможете напрямую передатьnpm installЧтобы установить ваши компоненты

npm install --save https://github.com/quenice/react-native-cardview.git

или

npm install --save git@github.com:quenice/react-native-cardview.git

Примечание: замените указанное выше на свой собственный URL-адрес на ghthub.HTTPSилиSSH

затем выполнить

$ react-native link react-native-rn-cardview

4.3.2 Через нпм

Этот способ ничем не отличается от следующих сторонних компонентов.

$ npm install --save react-native-rn-cardview

затем выполнить

$ react-native link react-native-rn-cardview

Эпилог

До сих порreact-nativeкомпонент завершенdev-тест-выпускЖизненный цикл завершен.

Потому что это комбинация компонентов, разработанных мнойreact-native-rn-cardviewФактический процесс разработки, поэтому неизбежно, что будут упущения, и должно быть много недостатков. Если у вас есть какие-либо вопросы или вы нашли какие-либо ошибки, пожалуйста, оставьте мне сообщение в области комментариев, и мы обсудим и решим их вместе.

Еслиreact-nativeнужно использоватьCardViewДа, добро пожаловать в использованиеreact-native-rn-cardview

Категории