自己摸索中，发现好多开源组件都不全是es6写的，有些方法使用原来的语法写的（人家都写开源组件的，当然是nb的不得了，膜拜下），
现在的安卓目录结构稍有不同，再说有些调用的方法不够简洁，明了。对于小学生的我，还是走了不少弯路，所以自己总结下，希望别人不要走弯路。
下面拿一个例子，来说明下，怎么在项目中使用开源组件，（调原生安卓的控件）。
昨天测试了下 ：
react-native-camera （调出拍照功能）
react-native-image-picker （调照片录像功能）
其实人家的使用说明的已经够详细了，（请叫我搬运工）。我做了个使用 react-native-image-picker 的图文教程而已。下面开始：
1.自己创建个工程，react-native init MyTestCamera （工程名字自己定）
2. npm install rnpm --global （安装rnpm）
img
3.npm install react-native-image-picker@latest --save (安装react-native-image-picker组件)
img
4.rnpm link react-native-image-picker （关联你的安卓工程）
img
5.调拍照、获取照片都是需要权限的，那就加上权限
<!-- file: android/app/src/main/AndroidManifest.xml -->
<!-- add following permissions -->
<uses-permission android:name="android.permission.CAMERA" />
<uses-permission android:name="android.permission.WRITE_EXTERNAL_STORAGE"/>
6.现在的安卓下的目录结构不是就一个Activity，具体操作如图：
img
在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 (
<View style={styles.container}>
<TouchableOpacity onPress={this.selectPhotoTapped.bind(this)}>
<View style={[styles.avatar, styles.avatarContainer, {marginBottom: 20}]}>
{ this.state.avatarSource === null ? <Text>Select a Photo</Text> :
<Image style={styles.avatar} source={this.state.avatarSource} />
}
</View>
</TouchableOpacity>
<TouchableOpacity onPress={this.selectVideoTapped.bind(this)}>
<View style={[styles.avatar, styles.avatarContainer]}>
<Text>Select a Video</Text>
</View>
</TouchableOpacity>
{ this.state.videoSource &&
<Text style={{margin: 8, textAlign: 'center'}}>{this.state.videoSource}</Text>
}
</View>
);
}
}
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。然后就可以直接运行了。
