美文网首页前端React NativeRN
React Native 速成 002 — 使用 UI框架 Re

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

作者: 时见疏星 | 来源:发表于2017-05-23 14:52 被阅读1731次

    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/

    相关文章

      网友评论

      • 李俊_8216:'opencollective' 不是内部或外部命令,也不是可运行的程序
        我 install 报这个错

      本文标题:React Native 速成 002 — 使用 UI框架 Re

      本文链接:https://www.haomeiwen.com/subject/gxxpxxtx.html