React Native Elements 是一款 React Native 的UI框架滞乙，風(fēng)格配色均屬上乘奏纪，框架封裝了很多常用組件，用來搭建產(chǎn)品原型非常方便斩启。
它的官方網(wǎng)站是 https://react-native-training.github.io/react-native-elements/
通過上一節(jié)的 CRNA 創(chuàng)建的 app序调，自帶了react-native-vector-icons ，所以可以非常方便的安裝它react-native-elements兔簇。
npm install react-native-elements
我們首先直接在 App.js 中試試它的組件吧发绢。
基礎(chǔ)組件
我們先來嘗試基礎(chǔ)組件硬耍，其中有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>
);
}
}
基礎(chǔ)組件的使用比較簡單坯认，直接 import from 'react-native-elements' 后調(diào)用即可，這里不再詳細敘述氓涣。我們主要看看一些常用的復(fù)雜組件牛哺。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
屬性來設(shè)置）番川。
這里我們引入它 import { ScrollView } from 'react-native';
然后將原先的 View 替換成 ScrollView 即可到涂。
export default class App extends React.Component {
render() {
return (
<ScrollView>
......
</ScrollView>
);
}
}
ScrollView適合用來顯示數(shù)量不多的滾動元素。放置在ScollView
中的所有組件都會被渲染颁督，哪怕有些組件因為內(nèi)容太長被擠出了屏幕外践啄。如果你需要顯示較長的滾動列表，那么應(yīng)該使用功能差不多但性能更好的ListView組件沉御。之后我們也會學(xué)習(xí)如何使用ListView屿讽。
注，類似的框架還有NativeBase吠裆，https://nativebase.io/
