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 ? Select a Photo :
                  style={styles.avatar} source={this.state.avatarSource} />
              }
            
          
          onPress={this.selectVideoTapped.bind(this)}>
            style={[styles.avatar, styles.avatarContainer]}>
              Select a Video
            
          
          { 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。然后就可以直接运行了。