preface

I started writing Objective-C in ’11. Back then, there weren’t a lot of open source UI control libraries out there. Perhaps the most popular were Three20 and Nimbus. Unfortunately, Three20 hasn’t been maintained in seven years, and Nimbus hasn’t updated its code in two. Later, the domestic famous BeeFramework gained a lot of attention in a short time. From the QQ space out of the old Guo, CSS instead of the original UI development mode of the technical scheme, let me see. I ended up giving up using the BeeFramework in my project just because the cost of team learning was too high. May be in the previous UI control library choice, stumbled, also tasted sweet. I think it is very important to find a good and stable control library for a project. So I’ve been looking for a control library that works for me ever since I got to know React Native. I tried three or four in the middle and finally gave up for various reasons. Until one day it came to react-native UI-lib. After a brief technical survey, I replaced all projects with this library.

Control library comparison

Here’s a quick look at the pros and cons of several libraries we’ve used:

react-native-elements

advantages

  • High attention, fast response

It has the highest number of stars of any UI framework I know of. There are now 9142 (4/2/18) and the frequency of commit is high. Most known bugs will be fixed soon.

  • Complete control

Provides a complete and consistent set of UI controls. If the designers on your team are comfortable with this UI, congratulations. You can use this UI framework to create a small App UI in just a few days.

insufficient

  • Trouble with style modification

If your App’s UI is highly customized, congratulations, you may need to write more UI code to customize the UI framework. So IN the later stage of using this framework, I simply imitated their coding ideas and customized a set of basic controls suitable for the project, such as Text, Button, ListItem, etc. Fewer and fewer controls use them.

  • A little bug

In the process of using, I found two or three bugs, such as textInput display abnormality on Android. However, due to this library attention is very high, the maintenance team is also very serious, so basically can find solutions in issues.

NativeBase

Similar to the capabilities provided by React-Native Elements, the current (4/2/18) number of STARS is 7586. React Native is one of the first UI libraries I used. However, it was later found that there were more bugs and it was not as convenient to use as React-native Elements. Later, he switched to react-native elements.

react-native-ui-lib

advantages

  • A quick layout

Compared with react-native elements, the biggest advantage of react-native UI-lib is that it provides convenient layout of basic components such as View, Text and Button. Take the layout of the following page




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

You just have to write it like this

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>
    );
  }
}
Copy the code

insufficient

  • Not much attention

The current (4/2/18)star count is 437

  • The document is not complete

The homepage of the official website has been under development. It’s been a few months since I started looking at this library. Wonder what the Wix team is up to… >.< API documentation is also rough. Not as comprehensive as React-Native Elements.

  • React Native0.44 is supported in the latest version

Official claims currently support 0.44, but I used it on 0.52 and didn’t find any problems. I’m not sure if there’s a deep hole.

Said so many deficiencies, just let you in the process of using, there is a psychological preparation. None of this has stopped me from loving the library. At present, I have not had any problems in the process of using it. If you find a pit, please leave a comment below.

Used to introduce

Next, see how to use the React-native UI-lib library.

Global style configuration

How you define styles is the key to using a UI component. UILib has a number of built-in global style configurations, including Colors, Typography, Shadows, Border Radius, and so on.

In the following example, we use the interface

Colors.loadColors()
Copy the code

Define two global colors: pink and gold.

Through the interface

Typography.loadTypographies()
Copy the code

Define two global text styles: H1 and 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},
});
Copy the code

We can then easily use colors and text styles anywhere in the project. For example, to set the Text style to H1 and color to pink, just say:

<Text h1 pink>Hello World</Text>
Copy the code

The end result is this




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

Colors and Typography are enough for me. If you want to know more about the global Settings interface, check out their source code, yes… Can only look at the source, because the document is not comprehensive, tie the heart of the old iron. T.T

Fast alignment

Using several attributes provided by UILib, you can quickly align your content. For example, the following code uses the View’s left, right, top, bottom, and center attributes. It is very convenient to set the layout of the content (Button here).

<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>
Copy the code

The end result looks like this




image.png

color

Above, we mentioned using colors.loadcolors () to unify the Colors. If we want to set the color of the text, we can do this:

<Text pink>... </Text>Copy the code

If we want to set the View background to Pink, we can do this:

<View bg-pink>... </View>Copy the code

We don’t need to set bG-pink as an extra key in colors.loadcolors (). Just add bg- or background- in front of the key we define.

flex

If we wanted to set the Flex of the View, we could just do this:

<View flex-2/> <View flex-3/> <View flex-4/>Copy the code

padding/margin

UILib also provides a quick way to set padding and margin: padding-[value], paddingL-[value], paddingT-[value], paddingR-[value], paddingB-[value], paddingH-[value], PaddingV -[value] For example, if we want to set the paddingVertical of the View to 20, we simply set the paddingV property of the View, followed by a bar, and then the value:

<View paddingV-20>... </View>Copy the code

If you want to set the paddingHorizontal to 30 at the same time, just do this:

<View paddingV-20 paddingH-30>... </View>Copy the code

Margin is used the same way as padding: margin-[value], marginL-[value], marginT-[value], marginR-[value], marginB-[value], marginH-[value], MarginV -[value] If you want to set the View’s marginTop to 5 and marginBottom to 10, just do this:

<View marginT-5 marginB-10>... </View>Copy the code

For more information about interfaces, see the official interface documentation

Unified management of image resources

Image resources are an important part of UI code. This includes ICONS, placeholders, etc. We use resources in a lot of areas of the project. UILib provides a unified management mode to facilitate our use of image resources. We can load the image resources we need when the App starts

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

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

The Image is then set by assetName when using the Image component

/> // By default, the assetGroup attribute is "ICONS"Copy the code

We can also configure our own 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'),
});
Copy the code

We then use our own AssetsGroup by setting the assetGroup when using the Image component

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

Also, we can use the Image’s original style and set the source of the Image

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

Rich controls

UILib provides a wealth of controls, see the official documentation for details

  • 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

However, I mainly use their View, Text, Button and other basic components.

Precautions (pit?)

  • The Text component supports margin, but not padding

This setting, for example, is invalid

<Text padding-10">... </Text>Copy the code

I guess the purpose of this design is to think that Text is the content component of the Text display, and the padding is not reasonable. The padding configuration is more appropriate for a container component, such as a View.

  • TouchableOpaciply does not support margin, padding and other layout attributes

I was not used to this setting at first, I thought it was a bug of UILib, but later I checked, their TouchableOpaciply did not provide these attributes. My guess is that the WiX team wanted to concentrate the layout code on the View. TouchableOpaciply focuses on this.

Use habits

  • theme

I like to create a file called theme.js in my project that configures the colors and fonts to be used in the project

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},
})
Copy the code

And then in the App entry, import this file

import theme from './App/theme'
Copy the code

This way, when the App starts, I can load the style configuration I need.

  • Use layout attributes provided by UILib sparingly

Too much is too much. UILib provides a convenient layout, but it can backfire if used too much in a project. Examples include the following two styles of code

The first kind of

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

The second,

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

When the layout of a View is complex, I recommend using the second method. Because if a component structure is complex, if you go all the way through the first method, then later when reading the code, the large amount of layout code will be a distraction. If you only need one or two layout styles for a View or Text, I recommend using the first. If there are more than three, the second method is recommended.

More and more

If you want to learn more about ReactNative, watch my new video ReactNative Combat — Meituan, which uses examples from my open source project Gao Imitation Meituan. The course is based on React Native 0.52.0, starting from project creation, coding step by step until the completion of the whole project.

Netease classroom

Tencent’s class

The resources

The react – native – UI – lib official dead simple