自己摸索中，发现好多开源组件都不全是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 linkreact-native-image-picker （关联你的安卓工程）
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，具体操作如图：
在MainActivity里面不用做操作，直接在MainApplication里面如图所示，加上引用的包名：
importcom.imagepicker.ImagePickerPackage;// import package
new ImagePickerPackage() // Add package
7.最后一步了。修改index.android.js 我是直接修改的，你也可以在自己项目里按照自己逻辑添加
/** * Sample React Native App * /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 packagepublic 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.*; // <--- importpublic 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。然后就可以直接运行了。
