RN项目中使用React Native UI Elements

技术经验 dingxiao 阅读数:41 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
]

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

captcha
  • test
    good!