常用的react native组件-react-navigation

注:个人积累,慢慢补齐

1、import StackNavigator
[code]
import {
StackNavigator,
} from ‘react-navigation’;
[/code]

2、navigationOptions设置
在Component里面定义:
[code]
static navigationOptions = ({ navigation }) => ({
title: navigation.state.params.movie.title,
headerStyle: styles.Navigator,
titleStyle: styles.Navigator_txt,
headerTintColor: "rgba(255, 255, 255, 0.8)"
});
[/code]

可以通过navigation参数获取导航切换的 this.props.navigation
参数获取: this.props.navigation.state.params.movie

3、定义screen
[code]
const Navigator_MovieList = StackNavigator({
Main: {screen: MovieList},
MovieDetail: {screen: MovieDetail}
});
export { Navigator_MovieList as default };
[/code]

当前的组件StackNavigator后再导出,

4、navigate对象操作
[code]
const {navigate} = this.props.navigation;
navigate(‘MovieDetail’, {movie: movie})
[/code]

使用navigation后在props有navigation,使用navigate方法可以切换导航的页面(movie是参数)

常用的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右侧显示索引

React-native搭建

一、安装native-cli
npm install -g react-native-cli

二、初始化项目
react-native init proname

三、配置Android环境
0.jdk安装
1.下载sdk
2.ndk通过sdk tool下载,会在sdk目录新增ndk-bundle目录
3.配置环境变量(添加多个ANDROID 是因为Android studio用到)
ANDROID_HOME D:\Android\sdk(对应sdk目录)
ANDROID_SDK_HOME D:\Android\sdk
ANDROID_SDK_ROOT D:\Android\sdk
NDK_ROOT D:\Android\sdk\ndk-bundle
PATH 新增(D:\Android\sdk\tools;D:\Android\sdk\platform-tools;)

四、启动虚拟机(或者插入手机)
emulator @Nexus_6_API_23

五、运行项目
react-native run-android

六、其它操作
1.启动对应端口的服务
react-native start –host 192.168.1.5 –port 8081
2.通过adb模拟菜单按键事件(对于某些手机无响应,必须打开当前app的 桌面悬浮窗 权限)
adb shell input keyevent 82

七、常见错误处理