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.调拍照、获取照片都是需要权限的，那就加上权限

<!-- 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里面如图所示，加上引用的包名：

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。然后就可以直接运行了。