RN项目中使用React Native UI Elements

技术经验 • dingxiao • 阅读数:2124 • 2019年1月24日 17:03

RN项目中使用React Native UI Elements

0x01-React Native UI Elements库

React Native UI Elements库是RN生态中用的较多的UI开源库。它提供的基本控件基本能满足日常应用开发的需求，其开源代码托管在github上地址为React Native UI Elements。

0x02-安装React Native UI Elements库

安装官方教程的说明进行源码安装，教程地址为安装教程。

Step 1: Install react-native-elements

  # yarn 
  yarn add react-native-elements@beta  
  # npm 
  npm i react-native-elements@beta --save

Step 2: Install react-native-vector-icons

If you have already installed react-native-vector-icons as a dependency for your project you can skip this step. Otherwise run the following command:

  # yarn
  yarn add react-native-vector-icons
  
  # npm
  npm i --save react-native-vector-icons
  
  # link
  react-native link react-native-vector-icons

0x03-使用React Native UI Elements库

安装完毕后，可以在项目中使用React Native UI Elements库。

  import React, { Component } from 'react';
  import { View, Image, Text, StyleSheet} from 'react-native';
  import { Button } from 'react-native-elements';
  import  Icon  from 'react-native-vector-icons/FontAwesome';
  
  class DX_Image extends Component {
    render() {
  
      return (
        <View style={styles.containe}>
            <Image source={{uri: this.props.name}} style={{width: 193, height: 110}} />
        </View>
      );
    }
  }
  
  export default class Bananas extends Component {
    render() {
      return (
        <View>
          <View style={styles.containe}>
              <Text style={{color: 'red'}}>Bing图片每日更新</Text>
          </View>
          <DX_Image name='https://cn.bing.com/az/hprichbg/rb/LaDigue_ZH-CN2774523529_1920x1080.jpg' />
          <DX_Image name='https://cn.bing.com/az/hprichbg/rb/GoldenEagle_ZH-CN2823955379_1920x1080.jpg' />
          <DX_Image name='https://cn.bing.com/az/hprichbg/rb/Snowkiters_ZH-CN3098762517_1920x1080.jpg' />
          <Button
            icon={
              <Icon
                name='arrow-right'
                size={15}
                color='white'
              />
            }
            title='BUTTON WITH ICON COMPONENT'
          />
          <Icon name="rocket" size={30} color="#900" />
        </View>
      );
    }
  }
  
  const styles = StyleSheet.create({
    containe:{
      backgroundColor: '#fff',
      alignItems: 'center',
    },
  });

0x05-React Native UI Elements库使用的问题

在使用React Native UI Elements库时，有可能出现icon图标不能正常显示的错误，该错误造成的原因是在ios或android配置中没有将font文件配置到相应的平台中。

问题参考网址网址。

如android需要平配置android/app/build.gradle文件。

  //使用内置的iconSets
  apply from: "../../node_modules/react-native-vector-icons/fonts.gradle"
  //使用自定义iconSets
  project.ext.vectoricons = [
     iconFontNames: [ 'FontAwesome.ttf'] // Name of the font files you want to copy
  ]

配置完成后，重新编译项目，即可正常显示图标。

暂无评论