前言

我從11年開始寫Objective-C。記得當時開源的UI控件庫還不是很多，最火的可能就是three20和nimbus?？上hree20已經(jīng)有七年不維護了，nimbus也有兩年沒有更新代碼。后來國內(nèi)著名的BeeFramework在短時間內(nèi)獲得很多的關注度。從QQ空間出來的老郭，做出的CSS代替原生UI開發(fā)方式的技術方案，讓我眼前一亮。只是因為團隊學習成本太大，我最終放棄了在項目中使用BeeFramework。
可能是之前在UI控件庫的選擇上，栽過跟頭，也嘗過甜頭。我覺得找一個好用且穩(wěn)定的控件庫，對一個項目來說非常重要。所以我從接觸React Native開始，就一直在尋找一個適合自己的控件庫。中間嘗試了三、四個，最后因為種種原因而放棄。直到有一天遇到react-native-ui-lib。簡單的技術調(diào)研后，我就把所有項目全部替換成這個庫。

控件庫對比

下面簡單分析下使用過的幾個庫的優(yōu)缺點：

react-native-elements

優(yōu)點

關注度高，響應速度快

目前我所知道的UI框架中，star數(shù)量最高的。目前(18年2月4日)已經(jīng)有9142個，而且commit頻率很高。大部分已知的bug，很快就會被修復。

控件齊全

提供了一套完善且風格一致的UI控件。如果你們團隊的設計師比較認同這套UI，那么恭喜你。你可以使用這個UI框架，在幾天內(nèi)完成一個小型App的UI。

不足

樣式修改麻煩

如果你們App的UI定制化程度高，那么恭喜你，你可能需要寫比原來更多的UI代碼，來對這套UI框架進行定制化開發(fā)。所以我在使用這套框架的后期，干脆模仿他們的編碼思路，自己定制一套適合項目的基礎控件，比如Text、Button、ListItem等。使用他們的控件反而越來越少。

少許的bug

在使用過程中，發(fā)現(xiàn)了兩三個bug，比如在安卓上textInput顯示異常等。不過歸功于這個庫關注度很高，維護的團隊也非常認真，所以issues里基本上都能找到解決方案。

NativeBase

與react-native-elements提供的能力差不多，目前(18年2月4日)star的數(shù)量是7586。是我最早使用的一個react native的ui庫。只是后來發(fā)現(xiàn)bug相對較多，使用起來也沒有react-native-elements方便。后來就轉向使用react-native-elements。

react-native-ui-lib

優(yōu)點

快速布局

相較于react-native-elements，react-native-ui-lib最大的優(yōu)點，就是額外提供了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>
    );
  }
}

不足

關注度不高

目前(18年2月4日)star的數(shù)量是437

文檔不全

官網(wǎng)的首頁，一直處于開發(fā)中的狀態(tài)。從我關注這個庫到現(xiàn)在，已經(jīng)幾個月過去了。不知道wix的團隊在忙什么。。。 >.<
API文檔也比較粗糙。沒有react-native-elements做得全面。

最新版本支持React Native0.44

官方聲稱目前支持到0.44，不過我在0.52上使用，沒有發(fā)現(xiàn)什么問題。不確定是否有隱藏比較深的坑。

講了這么多不足，只是讓各位在使用的過程中，有一個心理準備。這些不足并沒有阻擋我對這個庫的熱愛。目前我在使用過程中，還沒出現(xiàn)什么問題。如果有發(fā)現(xiàn)坑的，歡迎大家在下方留言。

使用介紹

接下來，具體看一下如何使用react-native-ui-lib庫（以下簡稱UILib）

全局的樣式配置

如何定義樣式，是使用一個UI組件的關鍵。UILib內(nèi)置了多種全局樣式的配置方式，包括Colors, Typography, Shadows, Border Radius等。

下面的例子中，我們通過接口

Colors.loadColors()

定義兩種全局的顏色：pink和gold。

通過接口

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，顏色為pink，只需要這樣寫：

<Text h1 pink>Hello World</Text>

最終的效果是這樣的

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

對我來說，Colors和Typography已經(jīng)夠用了。如果你們想了解更多的全局設置接口，可以查看他們的源碼，是的。。。只能看源碼了，因為文檔并不全面，扎心了老鐵。。 T.T

快速對齊

使用UILib提供的幾個屬性，可以快速的實現(xiàn)內(nèi)容的對齊。比如下面的代碼，使用了View的left、right、top、bottom、center屬性。非常方便的設置了內(nèi)容（這里的Button）的布局。

<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()來統(tǒng)一配置顏色。如果我們要設置文字的顏色，可以這樣：

<Text pink>...</Text>

如果我們希望把View的背景也設置成pink的話，我們可以這樣：

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

我們并不需要額外在Colors.loadColors()中設置bg-pink這個key。只需要在我們定義的key前面，加上bg-或者background-就可以了。

flex

如果我們要設置View的flex，我們可以直接這樣：

<View flex> // 在這里，flex默認為1
  <View flex-2/>
  <View flex-3/>
  <View flex-4/>
</View>

padding/margin

UILib同樣提供了快速設置padding和margin的方法：
padding-[value], paddingL-[value], paddingT-[value], paddingR-[value], paddingB-[value], paddingH-[value], paddingV-[value]
比如，我們想設置View的paddingVertical為20，只需要設置View的屬性paddingV，后面加上橫杠，然后是具體的數(shù)值：

<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]
如果要設置View的marginTop為5，marginBottom為10，只需要這樣：

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

更多的相關接口，可以查看官方接口文檔

圖片資源的統(tǒng)一管理

圖片資源是UI代碼里很重要的一個組成部分。包括圖標、占位圖等。我們在項目的非常多地方，都會使用到資源。UILib提供了一套統(tǒng)一的管理方式，方便我們使用圖片資源。
我們可以在App啟動時，加載需要用到的圖片資源

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

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

然后在使用Image組件時，通過assetName設置圖片

<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組件時，通過設置assetGroup，來使用我們自己的AssetsGroup

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

同樣，我們也可以使用Image原來的風格，設置Image的source

<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組件支持margin，但不支持padding

比如這樣設置，是無效的

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

我猜想他們這樣設計的目的，是認為Text作為文字展示的內(nèi)容組件（content component），設置padding是不合理的。padding的配置交給容器組件（container component），比如View，可能會更合理。

TouchableOpaciply不支持margin、padding等布局屬性

這個設定剛開始我不太習慣，一度以為是UILib的bug，后來查了下，他們的TouchableOpaciply就是沒有提供這些屬性。我猜想wix團隊是希望把布局的代碼集中在View上。TouchableOpaciply專注于實現(xiàn)點擊這個功能。

使用習慣

theme

我喜歡在項目中創(chuàng)建一個叫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},
})

然后在App的入口，導入這個文件

import theme from './App/theme'

這樣，App啟動的時候，就可以加載我所需要的樣式配置。

適量的使用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的實戰(zhàn)技巧，歡迎觀看本人剛推出的《ReactNative實戰(zhàn)-美團》視頻教程，本課程的案例來自我的開源項目高仿美團。
課程基于React Native 0.52.0，從創(chuàng)建工程講起，一步一步編寫代碼，直至完成整個項目。

騰訊課堂

網(wǎng)易課堂

參考資料

react-native-ui-lib官方Github

色偷偷精品伊人,欧洲久久精品,欧美综合婷婷骚逼,国产AV主播,国产最新探花在线,九色在线视频一区,伊人大交九欧美,1769亚洲,黄色成人av

最靈活的UI控件庫：React Native UI Lib

最靈活的UI控件庫：React Native UI Lib

前言

控件庫對比

react-native-elements

優(yōu)點

關注度高，響應速度快

控件齊全

不足

樣式修改麻煩

少許的bug

NativeBase

react-native-ui-lib

優(yōu)點

快速布局

不足

關注度不高

文檔不全

最新版本支持React Native0.44

使用介紹

全局的樣式配置

快速對齊

顏色

flex

padding/margin

圖片資源的統(tǒng)一管理

豐富的控件

注意事項（坑？）

Text組件支持margin，但不支持padding

TouchableOpaciply不支持margin、padding等布局屬性

使用習慣

theme

適量的使用UILib提供的布局屬性

第一種

第二種

更多

參考資料

相關閱讀更多精彩內(nèi)容

友情鏈接更多精彩內(nèi)容

色偷偷精品伊人,欧洲久久精品,欧美综合婷婷骚逼,国产AV主播,国产最新探花在线,九色在线视频一区,伊人大交九 欧美,1769亚洲,黄色成人av

最靈活的UI控件庫：React Native UI Lib

前言

控件庫對比

react-native-elements

優(yōu)點

關注度高，響應速度快

控件齊全

不足

樣式修改麻煩

少許的bug

NativeBase

react-native-ui-lib

優(yōu)點

快速布局

不足

關注度不高

文檔不全

最新版本支持React Native0.44

使用介紹

全局的樣式配置

快速對齊

顏色

flex

padding/margin

圖片資源的統(tǒng)一管理

豐富的控件

注意事項（坑？）

Text組件支持margin，但不支持padding

TouchableOpaciply不支持margin、padding等布局屬性

使用習慣

theme

適量的使用UILib提供的布局屬性

第一種

第二種

更多

參考資料

相關閱讀更多精彩內(nèi)容

友情鏈接更多精彩內(nèi)容

色偷偷精品伊人,欧洲久久精品,欧美综合婷婷骚逼,国产AV主播,国产最新探花在线,九色在线视频一区,伊人大交九欧美,1769亚洲,黄色成人av

注意事項（坑？）

Text組件支持margin，但不支持padding