React Native 速成 002 — 使用 UI框架 Re

React Native Elements 是一款 React Native 的UI框架，风格配色均属上乘，框架封装了很多常用组件，用来搭建产品原型非常方便。

它的官方网站是 https://react-native-training.github.io/react-native-elements/

通过上一节的 CRNA 创建的 app，自带了react-native-vector-icons ，所以可以非常方便的安装它react-native-elements。

npm install react-native-elements

我们首先直接在 App.js 中试试它的组件吧。

基础组件

我们先来尝试基础组件，其中有Button，Badge，Social Icon，Icon等，可以在这里查看它们的使用文档。

import React from 'react';
import { StyleSheet, Text, View } from 'react-native';
import { Button } from 'react-native-elements';
import { SocialIcon } from 'react-native-elements';
import { Icon } from 'react-native-elements';
import { Badge } from 'react-native-elements';
import { Avatar } from 'react-native-elements';


export default class App extends React.Component {
  render() {
    return (
      <View>
        <Text>Button</Text>
        <Button
          raised
          icon={{name: 'home', size: 32}}
          buttonStyle={{backgroundColor: 'red', borderRadius: 10}}
          textStyle={{textAlign: 'center'}}
          title={`Welcome to\nReact Native Elements`} />

        <Text>SocialIcon</Text>
        <SocialIcon
          type='twitter'
        />
        <SocialIcon
          raised={false}
          type='gitlab'
        />
        <SocialIcon
          title='Sign In With Facebook'
          button
          type='facebook'
        />
        <SocialIcon
          title='Some Twitter Message'
          button
          type='twitter'
        />

        <Text>Icon</Text>
        <Icon
          name='sc-telegram'
          type='evilicon'
          color='#517fa4'
        />
        <Icon
          reverse
          name='ios-american-football'
          type='ionicon'
          color='#517fa4'
        />
        <Icon
          raised
          name='heartbeat'
          type='font-awesome'
          color='#f50'
          onPress={() => console.log('hello')} />

        <Text>Badge</Text>
        <Badge
          value={3}
          textStyle={{ color: 'orange' }}
        />

        <Badge containerStyle={{ backgroundColor: 'violet'}}>
          <Text>User 1</Text>
        </Badge>

        <Badge onPress={() => {console.log('pressed')}} value="5" />

        <Text>Avatar</Text>
        <Avatar
          small
          rounded
          title="MT"
          onPress={() => console.log("Works!")}
          activeOpacity={0.7}
        />
        <Avatar
          medium
          title="BP"
          onPress={() => console.log("Works!")}
          activeOpacity={0.7}
        />

      </View>
    );
  }
}

基础组件的使用比较简单，直接 import from 'react-native-elements' 后调用即可，这里不再详细叙述。我们主要看看一些常用的复杂组件。smart和dumb组件的划分可以看之前的文章。

Card 卡片组件

首先我们来看 Card 卡片组件，通常用来显示一个或者系列项目。

这里我们在项目文件夹下添加 images 子文件夹，然后使用
image={require('./images/card.jpg')}>添加文件。
同时，也可以指定image的uri来添加图片
image={{uri:'http://image.tianjimedia.com/uploadImages/2011/253/437L1Y9HRN2U.jpg'}}>

效果如下：

import React from 'react';
import { StyleSheet, Text, View } from 'react-native';
import { Card, ListItem, Button } from 'react-native-elements';

const users = [
 {
    name: 'apple',
    avatar: 'http://iph.href.lu/50x50?text=apple'
 },
 {
    name: 'banana',
    avatar: 'http://iph.href.lu/50x50?text=banana'
 },
 {
    name: 'cat',
    avatar: 'http://iph.href.lu/50x50?text=cat'
 },
 {
    name: 'dog',
    avatar: 'http://iph.href.lu/50x50?text=dog'
 },
]


export default class App extends React.Component {
  render() {
    return (
      <View>
        <Text> Card </Text>

        <Card containerStyle={{padding: 0}} >
          {
            users.map((u, i) => {
              return (
                <ListItem
                  key={i}
                  roundAvatar
                  title={u.name}
                  avatar={{uri:u.avatar}} />

              )
            })
          }
        </Card>

        <Card
          title='HELLO WORLD'
          image={require('./images/card.jpg')}>
          <Text style={{marginBottom: 10}}>
            The idea with React Native Elements is more about component structure than actual design.
          </Text>
          <Button
            icon={{name: 'code'}}
            backgroundColor='#03A9F4'
            buttonStyle={{borderRadius: 0, marginLeft: 0, marginRight: 0, marginBottom: 0}}
            title='VIEW NOW' />
        </Card>

      </View>
    );
  }
}

倘若多个 Card 一个 View 里面放不下怎么办？

那我们将要使用 ScrollView。

ScrollView

ScrollView
是一个通用的可滚动的容器，你可以在其中放入多个组件和视图，而且这些组件并不需要是同类型的。ScrollView不仅可以垂直滚动，还能水平滚动（通过horizontal
属性来设置）。

这里我们引入它 import { ScrollView } from 'react-native';

然后将原先的 View 替换成 ScrollView 即可。

export default class App extends React.Component {
  render() {
    return (
      <ScrollView>
      ......
      </ScrollView>
    );
  }
}

ScrollView适合用来显示数量不多的滚动元素。放置在ScollView
中的所有组件都会被渲染，哪怕有些组件因为内容太长被挤出了屏幕外。如果你需要显示较长的滚动列表，那么应该使用功能差不多但性能更好的ListView组件。之后我们也会学习如何使用ListView。

注，类似的框架还有NativeBase，https://nativebase.io/