предисловие

Пишу на Objective-C с 11 лет. Я помню, что в то время было не так много библиотек управления пользовательским интерфейсом с открытым исходным кодом, и, наверное, самой популярной былаthree20а такжеnimbus. Жаль, что three20 не поддерживается уже семь лет, а nimbus не обновляет код два года. Позже знаменитыйBeeFrameworkПолучите много внимания за короткий промежуток времени. Лао Го, пришедший из пространства QQ, сделал техническое решение по замене нативного метода разработки пользовательского интерфейса на CSS, от которого у меня заблестели глаза. Только потому, что стоимость командного обучения слишком высока, я, наконец, отказался от использования BeeFramework в проекте.
Может быть, при выборе библиотеки управления пользовательским интерфейсом я повозился и вкусил сладости. Я думаю, что для проекта очень важно найти полезную и стабильную библиотеку управления. Поэтому с тех пор, как я познакомился с React Native, я искал подходящую мне библиотеку управления. Я попробовал три или четыре в середине и, наконец, сдался по разным причинам. до одного дняreact-native-ui-lib. После несложного технического исследования я выставил все проектывсеЗамените этой библиотекой.

Сравнение контрольной библиотеки

Преимущества и недостатки нескольких используемых библиотек кратко проанализированы ниже:

react-native-elements

преимущество

Высокое внимание и быстрая реакция

Среди фреймворков пользовательского интерфейса, которые я знаю, наибольшее количество звездочек. На данный момент (4 февраля 18) их уже 9142, и частота коммитов очень высока. Большинство известных ошибок будут исправлены в ближайшее время.

Полный контроль

Предоставляет полный набор элементов управления пользовательского интерфейса с согласованным стилем. Если дизайнеры вашей команды согласны с этим интерфейсом, поздравляем. Вы можете использовать эту структуру пользовательского интерфейса для завершения пользовательского интерфейса небольшого приложения за несколько дней.

недостаточный

Проблема с модификацией стиля

Если ваше приложение имеет высокую степень настройки пользовательского интерфейса, поздравляем, вам может потребоваться написать больше кода пользовательского интерфейса, чем исходный, чтобы настроить разработку этой среды пользовательского интерфейса. Поэтому на более позднем этапе использования этого фреймворка я просто подражал их идеям кодирования и настраивал набор основных элементов управления, подходящих для проекта, таких как Text, Button, ListItem и т. д. Используйте их элементы управления все меньше и меньше.

несколько ошибок

За время использования были обнаружены две-три ошибки, например ненормальное отображение textInput на Android. Однако, благодаря высокому уровню внимания к этой библиотеке и очень серьезной команде поддержки, решения в основном можно найти в проблемах.

NativeBase

Подобно возможностям, предоставляемым react-native-elements, текущее (2/4/18) количество звезд составляет 7586. Это первая нативная библиотека пользовательского интерфейса, которую я использовал. Только позже выяснилось, что багов было относительно много, а использовать react-native-elements было не так удобно. Позже перешел на react-native-elements.

react-native-ui-lib

преимущество

Быстрый макет

По сравнению с react-native-elements самым большим преимуществом react-native-ui-lib является то, что он дополнительно предоставляет удобные возможности макета для основных компонентов, таких как View, Text и Button. Например, макет следующей страницы

f5db80f4-1b82-11e7-8538-5a3388fb4345.png

Вам просто нужно написать так

import React, {Component} from 'react';
import {View, TextInput, Text, Button} from 'react-native-ui-lib';

export default class Example extends Component {

  render() {
    return (
      <View flex paddingH-25 paddingT-120>
        <Text blue50 text20>Welcome</Text>
        <TextInput text50 placeholder="username" dark10/>
        <TextInput text50 placeholder="password" secureTextEntry dark10/>
        <View marginT-100 center>
          <Button text70 white background-orange30 label="Login"/>
          <Button link text70 orange30 label="Sign Up" marginT-20/>
        </View>
      </View>
    );
  }
}

недостаточный

Не много внимания

Текущее (04.02.18) количество звезд - 437.

Неполная документация

Официальный сайттитульная страница, находится в разработке. Прошло несколько месяцев с тех пор, как я следил за этой библиотекой. Не знаю, чем занимается команда Wix. . . >. Документация API.Тоже грубый. No react-native-elements не делает этого комплексно.

Последняя версия поддерживает React Native0.44.

Официально утверждается, что в настоящее время он поддерживает 0.44, но я использовал его на 0.52 и не обнаружил проблем. Не уверен, что есть более глубокие ямы.

Рассказав о столь многих недостатках, я просто хочу, чтобы вы были морально готовы в процессе его использования. Эти недостатки не помешали мне полюбить эту библиотеку. У меня не было никаких проблем при использовании до сих пор. Если вы найдете какие-либо ямы, пожалуйста, оставьте сообщение ниже.

Введение

Далее рассмотрим, как использовать библиотеку react-native-ui-lib (далее UILib)

конфигурация глобального стиля

Как определить стили — это ключ к использованию компонента пользовательского интерфейса. UIlib имеет множество встроенных методов настройки глобального стиля, в том числеColors, Typography, Shadows, Border RadiusЖдать.

В следующем примере мы передаем интерфейс

Colors.loadColors()

Определите два глобальных цвета: розовый и золотой.

через интерфейс

Typography.loadTypographies()

Определите два глобальных стиля текста: h1 и h2.

import {Typography, Colors} from 'react-native-ui-lib';

Colors.loadColors({
  pink: '#FF69B4',
  gold: '#FFD700',
});

Typography.loadTypographies({
  h1: {fontSize: 58, fontWeight: '300', lineHeight: 80},
  h2: {fontSize: 46, fontWeight: '300', lineHeight: 64},
});

Затем мы можем легко использовать цвета и стили текста в любом месте проекта. Например, чтобы установить стиль текста Text на h1 и розовый цвет, просто напишите:

<Text h1 pink>Hello World</Text>

Конечный эффект таков

296b7ebc-1b86-11e7-8580-9252d1ddf5d9.png

Для меня достаточно цветов и типографики. Если вы хотите узнать больше об интерфейсе глобальных настроек, вы можете проверить ихисходный код,Да. . . Я могу только посмотреть исходный код, потому что документация неполная, что раздражает. . Т.Т.

быстрое выравнивание

Используя несколько свойств, предоставляемых UIlib, вы можете быстро добиться выравнивания содержимого. Например, в следующем коде используются свойства View слева, справа, сверху, снизу и по центру. Очень удобно задавать макет содержимого (Кнопка здесь).

<View left>
  <Button label="Button">
</View>

<View right>
  <Button label="Button">
</View>

<View top>
  <Button label="Button">
</View>

<View bottom>
  <Button label="Button">
</View>

<View center>
  <Button label="Button">
</View>

Окончательный эффект выглядит так

image.png

цвет

Выше мы упоминали об использовании Colors.loadColors() для единообразной настройки цветов. Если мы хотим установить цвет текста, мы можем сделать это:

<Text pink>...</Text>

Если мы хотим сделать фон представления розовым, мы можем сделать это:

<View bg-pink>...</View>

Нам не нужно устанавливать ключ bg-pink в Colors.loadColors(). Просто добавьте перед ключом, который мы определилиbg-илиbackground-Вот и все.

flex

Если мы хотим установить View, flex, мы можем указать это:

<View flex> // 在这里，flex默认为1
  <View flex-2/>
  <View flex-3/>
  <View flex-4/>
</View>

padding/margin

UIlib также предоставляет быстрый способ установить отступы и поля:
padding-[value], paddingL-[value], paddingT-[value], paddingR-[value], paddingB-[value], paddingH-[value], paddingV-[value]
Например, если мы хотим установить paddingVertical представления на 20, нам нужно только установить свойства представленияpaddingV, за которым следует тире, а затем конкретное значение:

<View paddingV-20>...</View>

Если вы хотите одновременно установить для paddingHorizontal значение 30, просто сделайте следующее:

<View paddingV-20 paddingH-30>...</View>

Margin используется так же, как padding:
margin-[value], marginL-[value], marginT-[value], marginR-[value], marginB-[value], marginH-[value], marginV-[value]
Если вы хотите установить для MarginTop представления значение 5, а для marginBottom значение 10, просто сделайте следующее:

<View marginT-5 marginB-10>...</View>

Для более связанных интерфейсов вы можете просмотретьОфициальная документация по интерфейсу

Единое управление ресурсами изображений

Ресурсы изображений являются важной частью кода пользовательского интерфейса. Включает значки, заполнители и многое другое. Мы используем ресурсы во многих местах проекта. UIlib предоставляет единый метод управления для использования ресурсов изображений. Мы можем загрузить ресурсы изображения, которые нам нужно использовать при запуске приложения.

import {Assets, Image} from 'react-native-ui-lib';

Assets.loadAssetsGroup('icons', {
  icon1: require('icon1.png'),
  icon2: require('icon2.png'),
  icon3: require('icon3.png'),
});

Затем при использовании компонента Image установите изображение через assetsName

<Image assetName="icon1"/> // 默认情况下，assetGroup属性是"icons"

Мы также можем настроить нашу собственную AssetsGroup

Assets.loadAssetsGroup('illustrations.placeholders', {
  emptyCart: require('emptyCart.png'),
  emptyProduct: require('emptyProduct.png'),
});
Assets.loadAssetsGroup('illustrations.emptyStates.', {
  noMessages: require('noMessages.png'),
  noContacts: require('noContacts.png'),
});

Затем, при использовании компонента Image, используйте нашу собственную AssetsGroup, установив assetsGroup

<Image assetName="emptyCart" assetGroup="illustrations.placeholders"/>

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

<Image source={Assets.icons.icon1}/>

Богатые элементы управления

UIlib предоставляет множество элементов управления, вы можете просмотреть деталиофициальная документация

Action Bar
Action Sheet (cross-platform)
Avatar
Badge
Basic List
Button
Card
Connection Status Bar
List Item
State Screen
Loader Screen
Page Control
Picker
Stepper
Text
TextInput
MaskedInput
TagsInput

Однако в настоящее время я в основном использую несколько основных компонентов, таких как View, Text и Button.

Меры предосторожности (яма?)

Компонент «Текст» поддерживает поля, но не отступы.

Например, этот параметр недействителен

<Text padding-10">...</Text>

Я предполагаю, что цель их дизайна заключается в том, что неразумно устанавливать отступы как текст в качестве компонента содержимого для отображения текста. Может быть более разумно оставить настройку заполнения компоненту-контейнеру, например представлению.

TouchableOpaciply не поддерживает атрибуты макета, такие как поля и отступы.

Сначала я не привык к этой настройке, думал, что это баг UIlib, после проверки их TouchableOpaciply не предоставил этих свойств. Я предполагаю, что команда wix хочет сфокусировать код макета на представлении. TouchableOpaciply фокусируется на реализациинажмитеэта функция.

привычка использования

theme

Мне нравится создавать в проекте файл с именем theme.js, в котором настраиваются цвета и шрифты, которые необходимо использовать в проекте.

import {Typography, Colors} from 'react-native-ui-lib'

Colors.loadColors({
    primary: '#4C6FB0',
    secondary: '#7DC8FF',

    border: '#bbbbbb',
    line: '#c5c5c5',
    paper: '#f3f3f3',
    highlighted: '#f9f9f9',

    lightGray: '#bbbbbb',
    gray: '#888888',
    darkGray: '#444444',

    green: '#176500',
    red: '#FF0032',
    blue: '#02008E',
    yellow: '#FFB400',
    white: '#FFFFFF',
    black: '#000000',
    transparent: 'transparent',

    defaultText: '#666666',
    lightText: '#aeaeae',
    darkText: '#444444',
})

Typography.loadTypographies({
    h1: {fontSize: 18, fontWeight: 'bold', color: Colors.darkText},
    h2: {fontSize: 16, color: Colors.darkText},
    h3: {fontSize: 15, color: Colors.darkText},
    h4: {fontSize: 14, color: Colors.defaultText},
    h5: {fontSize: 12, color: Colors.lightText},
})

Затем при входе в приложение импортируйте этот файл

import theme from './App/theme'

Таким образом, при запуске приложения может быть загружена нужная мне конфигурация стиля.

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

Как говорится, крайности надо менять местами. Хотя UILib предоставляет удобный метод компоновки, чрезмерное его использование в проекте приведет к обратным результатам. Например, следующие два стиля кода

Первый

<View bg-primary paddingLeft-5 paddingTop-8 paddingRight-10 paddingB-20 row centerV>
    <Image
        style={styles.avatar}
        source={require('../../img/mine/avatar.png')}
    />
</View>

второй

<View style={styles.container}>
    <Image
        style={styles.avatar}
        source={require('../../img/mine/avatar.png')}
    />
</View>

Когда макет View сравниваетсясложныйкогда я рекомендую использоватьвторойСпособ. Потому что если структура компонента сложна, если весь первый метод принят, то при чтении кода в дальнейшем большое количество кодов компоновки неизбежно будет вызывать помехи.
Если View и Text нужно установить только один или два стиля макета, я рекомендую использоватьПервыйКак установить. Если их больше трех, рекомендуется использоватьвторойСпособ.

Более

Если вы хотите узнать больше о практических навыках React Native, посмотрите видеоурок "ReactNative Combat - Meituan", который я только что запустил. Кейс этого курса взят из моего проекта с открытым исходным кодом.Высокая имитация мейтуана.
Курс основан на React Native 0.52.0, начиная с создания проекта, пошагового написания кода и заканчивая проектом целиком.

Класс NetEase

Тенсент Класс

использованная литература

официальный Github react-native-ui-lib

предисловие

Сравнение контрольной библиотеки

react-native-elements

преимущество

Высокое внимание и быстрая реакция

Полный контроль

недостаточный

Проблема с модификацией стиля

несколько ошибок

NativeBase

react-native-ui-lib

преимущество

Быстрый макет

недостаточный

Не много внимания

Неполная документация

Последняя версия поддерживает React Native0.44.

Введение

конфигурация глобального стиля

быстрое выравнивание

цвет

flex

padding/margin

Единое управление ресурсами изображений

Богатые элементы управления

Меры предосторожности (яма?)

Компонент «Текст» поддерживает поля, но не отступы.

TouchableOpaciply не поддерживает атрибуты макета, такие как поля и отступы.

привычка использования

theme

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

Первый

второй

Более

Класс NetEase

Тенсент Класс

использованная литература