这种功能网上已经有了许多开源组件,虽然是现成的,不过也是需要学习如何使用的,集成到自己项目的过程中可能也会遇到一些问题,而且开源的功能也不一定能够完全的符合自己的需求,所以试着自己实现一下,欢迎大家分享自己的观点和意见。
实现思路很简单,就是原生部分调用相机将拍照的图片保存到sd卡,js部分负责显示。将图片保存的sd卡是为了下次启动应用的时候头像依然有效,也可以上传到服务器。编写代码使用webStorm 和 androidStudio。
下面开始实现:
首先执行命令 react-native init HeadImage 创建一个名为HeadImage的工程,创建好工程后执行 react-native run-android 看看是否能编译运行
实现思路很简单,就是原生部分调用相机将拍照的图片保存到sd卡,js部分负责显示。将图片保存的sd卡是为了下次启动应用的时候头像依然有效,也可以上传到服务器。编写代码使用webStorm 和 androidStudio。
下面开始实现:
首先执行命令 react-native init HeadImage 创建一个名为HeadImage的工程,创建好工程后执行 react-native run-android 看看是否能编译运行
然后找一张图片 head_default.png(命名随意)作为默认头像,放到工程的 HeadImage\android\app\src\main\res\drawable 目录下,rn默认工程没有drawable可以自己新建一个,然后webstorm选择工程根目录打开,修改index.android.js代码
export default class HeadImage extends Component { render() { return ( <View style={styles.container}> <TouchableOpacity onPress={ this._clickImage}> <Image source={ { uri: 'head_default'}} style={ { width:50,height:50}}/> </TouchableOpacity> </View> ); } _clickImage(){ console.log("click image..."); } }
修改了render方法,t添加_clickImage方法,TouchableOpacity和Image组件别忘了import
注意Image的uri要与自己放在HeadImage\android\app\src\main\res\drawable目录下的默认头像图片命名一致,之后编译运行(必须编译运行,因为加了资源图片,只是reload是不显示图片的),运行结果将显示默认头像,点击打出log
接下来实现与原生的交互,参考 http://reactnative.cn/docs/0.31/native-modules-android.html#content
androidstudio打开工程的android目录
新建两个类,HeadImageModule.java和HeadImagePackage.java,分别继承ReactContextBaseJavaModule和ReactPackage,之后在MainApplication.java里面注册,各部分代码如下:
HeadImageModule.java
public class HeadImageModule extends ReactContextBaseJavaModule { public HeadImageModule(ReactApplicationContext reactContext) { super(reactContext); } @Override public String getName() { return "HeadImageModule"; //注意这里的返回值 } @ReactMethod public void callCamera() { // 调用相机的方法 Log.d("","call camera..."); } }
HeadImagePackage.java
public class HeadImagePackage implements ReactPackage { @Override public List<NativeModule> createNativeModules(ReactApplicationContext reactContext) { List<NativeModule> modules = new ArrayList<>(); modules.add(new HeadImageModule(reactContext)); return modules; } @Override public List<Class<? extends JavaScriptModule>> createJSModules() { return Collections.emptyList(); } @Override public List<ViewManager> createViewManagers(ReactApplicationContext reactContext) { return Collections.emptyList(); } }