常用的react native组件-react-native-vector-icons

1、安装react-native-vector-icons
npm install react-native-vector-icons –save

2、编辑 android/app/build.gradle
[code]
project.ext.vectoricons = [
iconFontNames: [ ‘MaterialIcons.ttf’, ‘EvilIcons.ttf’ ] // Name of the font files you want to copy
]

apply from: "../../node_modules/react-native-vector-icons/fonts.gradle"
[/code]

3、拷贝modules下面的fonts文件夹
拷贝到 android/app/src/main/assets/fonts

4、修改 android/settings.gradle
添加
[code]
rootProject.name = ‘MyApp’

include ‘:app’

+ include ‘:react-native-vector-icons’
+ project(‘:react-native-vector-icons’).projectDir = new File(rootProject.projectDir, ‘../node_modules/react-native-vector-icons/android’)
[/code]

5、编辑 android/app/build.gradle
[code]apply plugin: ‘com.android.application’

android {

}

dependencies {
compile fileTree(dir: ‘libs’, include: [‘*.jar’])
compile "com.android.support:appcompat-v7:23.0.1"
compile "com.facebook.react:react-native:+" // From node_modules
+ compile project(‘:react-native-vector-icons’)
}[/code]

6、编辑 MainApplication.java(android/app/src/main/java/…)

[code]package com.myapp;

+ import com.oblador.vectoricons.VectorIconsPackage;

….

@Override
protected List<ReactPackage> getPackages() {
return Arrays.<ReactPackage>asList(
new MainReactPackage()
+ , new VectorIconsPackage()
);
}

}[/code]

7、rnpm
使用react-native link

8、使用
[code]import Icon from ‘react-native-vector-icons/FontAwesome’;
const myIcon = (<Icon name="rocket" size={30} color="#900" />)[/code]

注:修改link的组件
react-native-vector-icons//字体图标

react-native-image-picker//读入照片

react-native-camera//相机

react-native-linear-gradient//颜色渐变

react-native-search-bar//search bar
react-native-tableview//原生的tableview,可以在list右侧显示索引

发表评论

邮箱地址不会被公开。 必填项已用*标注