React Native调用开源组件库、安卓原生控件（Android端）
自己摸索中，发现好多开源组件都不全是es6写的，有些方法使用原来的语法写的（人家都写开源组件的，当然是nb的不得了，膜拜下），现在的安卓目录结构稍有不同，再说有些调用的方法不够简洁，明了。对于小学生的我，还是走了不少弯路，所以自己总结下，希望别人不要走弯路。
下面拿一个例子，来说明下，怎么在项目中使用开源组件，（调原生安卓的控件）。
昨天测试了下 ：
react-native-camera （调出拍照功能）
react-native-image-picker （调照片录像功能）
其实人家的使用说明的已经够详细了，（请叫我搬运工）。我做了个使用 react-native-image-picker 的
图文教程而已。下面开始：
1.自己创建个工程，react-native init MyTestCamera （工程名字自己定）
2.
npm install rnpm --global （安装rnpm）
3.npm install react-native-image-picker@latest --save (安装react-native-image-picker组件)
4.
rnpm link react-native-image-picker （关联你的安卓工程）
5.调拍照、获取照片都是需要权限的，那就加上权限
<uses-permission android:name="android.permission.CAMERA" />
<uses-permission android:name="android.permission.WRITE_EXTERNAL_STORAGE"/>
6.现在的安卓下的目录结构不是就一个Activity，具体操作如图：
在MainActivity里面不用做操作，直接在MainApplication里面如图所示，加上引用的包名：
import
com.imagepicker.ImagePickerPackage
;
// import package
new ImagePickerPackage() // Add package
7.最后一步了。修改index.android.js 我是直接修改的，你也可以在自己项目里按照自己逻辑添加
/**
* Sample React Native App
* https://github.com/facebook/react-native
* @flow
*/
import React, { Component } from 'react';
import {
AppRegistry,
StyleSheet,
Text,
View,
PixelRatio,
TouchableOpacity,
Image,
Platform
} from 'react-native';
import ImagePicker from 'react-native-image-picker';
class MyTestCamera extends Component {
state = {
avatarSource: null,
videoSource: null
};
selectPhotoTapped() {
const options = {
quality: 0.5,
maxWidth: 300,
maxHeight: 300,
allowsEditing: false,
storageOptions: {
skipBackup: true
}
};
ImagePicker.showImagePicker(options, (response) => {
console.log('Response = ', response);
if (response.didCancel) {
console.log('User cancelled photo picker');
}
else if (response.error) {
console.log('ImagePicker Error: ', response.error);
}
else if (response.customButton) {
console.log('User tapped custom button: ', response.customButton);
}
else {
var source;
// You can display the image using either:
source = {uri: 'data:image/jpeg;base64,' + response.data, isStatic: true};
// Or:
// if (Platform.OS === 'android') {
// source = {uri: response.uri, isStatic: true};
// } else {
// source = {uri: response.uri.replace('file://', ''), isStatic: true};
// }
this.setState({
avatarSource: source
});
}
});
}
selectVideoTapped() {
const options = {
title: 'Video Picker',
takePhotoButtonTitle: 'Take Video...',
mediaType: 'video',
videoQuality: 'medium'
};
ImagePicker.showImagePicker(options, (response) => {
console.log('Response = ', response);
if (response.didCancel) {
console.log('User cancelled video picker');
}
else if (response.error) {
console.log('ImagePicker Error: ', response.error);
}
else if (response.customButton) {
console.log('User tapped custom button: ', response.customButton);
}
else {
this.setState({
videoSource: response.uri
});
}
});
}
render() {
return (
style={styles.container}>
onPress={this.selectPhotoTapped.bind(this)}>
style={[styles.avatar, styles.avatarContainer, {marginBottom: 20}]}>
{ this.state.avatarSource === null ? style={styles.avatar} source={this.state.avatarSource} />
}
onPress={this.selectVideoTapped.bind(this)}>
style={[styles.avatar, styles.avatarContainer]}>
{ this.state.videoSource &&
style={{margin: 8, textAlign: 'center'}}>{this.state.videoSource}
}
);
}
}
const styles = StyleSheet.create({
container: {
flex: 1,
justifyContent: 'center',
alignItems: 'center',
backgroundColor: '#F5FCFF'
},
avatarContainer: {
borderColor: '#9B9B9B',
borderWidth: 1 / PixelRatio.get(),
justifyContent: 'center',
alignItems: 'center'
},
avatar: {
borderRadius: 75,
width: 150,
height: 150
}
});
AppRegistry.registerComponent('MyTestCamera', () => MyTestCamera);
ok。激动人心的时刻到了。
react-native start
react-native run-android
大功告成！！！
=================华丽丽的分割线=================
好多的开源组件的安装教程中介绍，需要手动修改。（也是可以的）
手动添加
1// file: android/settings.gradle...
include ':react-native-image-picker'
project(':react-native-image-picker').projectDir = new File(settingsDir, '../node_modules/react-native-image-picker/android')
2// file: android/app/build.gradle... dependencies { ... compile project(':react-native-image-picker') }
// file: android/app/src/main/java/com/<...>/MainActivity.java... import com.imagepicker.ImagePickerPackage; // import package public class MainActivity extends ReactActivity { /** * A list of packages used by the app. If the app uses additional views * or modules besides the default ones, add more packages here. */ @Override protected List<ReactPackage> getPackages() { return Arrays.<ReactPackage>asList( new MainReactPackage(), new ImagePickerPackage() // Add package ); } ... }
//老版本的还有这种
import com.remobile.camera.*; // <--- import
public class MainActivity extends Activity implements DefaultHardwareBackBtnHandler {
...... private RCTCameraPackage mCameraPackage; // <--- declare package @Override protected void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); mReactRootView = new ReactRootView(this); mCameraPackage = new RCTCameraPackage(this);// <--- alloc package mReactInstanceManager = ReactInstanceManager.builder() .setApplication(getApplication()) .setBundleAssetName("index.android.bundle") .setJSMainModuleName("index.android") .addPackage(new MainReactPackage()) .addPackage(mCameraPackage) // <------ add here .setUseDeveloperSupport(BuildConfig.DEBUG) .setInitialLifecycleState(LifecycleState.RESUMED) .build(); mReactRootView.startReactApplication(mReactInstanceManager, "ExampleRN", null); setContentView(mReactRootView); } .....
。。。。。。。
这个看情况而定
===============华丽丽的分割线===============
还有就是，好多开源的组件都有个Example，你可以直接在这里面 npm install 。生成model。然后就可以直接运行了。