android 本地图片显示

android 本地图片显示

Author: xhp

.gitignore

@@ -0,0 +1,6 @@
+
+android/*.iml
+android/build
+android/.idea/
+.DS_Store
+.idea/

README.md

@@ -1,2 +1,53 @@
+
 # react-native-local-image
-react native 显示本地图片
+
+## Getting started
+
+`$ npm install react-native-local-image --save`
+
+### Mostly automatic installation
+
+`$ react-native link react-native-local-image`
+
+### Manual installation
+
+
+#### iOS
+
+1. In XCode, in the project navigator, right click `Libraries` ➜ `Add Files to [your project's name]`
+2. Go to `node_modules` ➜ `react-native-local-image` and add `RNInputRecord.xcodeproj`
+3. In XCode, in the project navigator, select your project. Add `libRNInputRecord.a` to your project's `Build Phases` ➜ `Link Binary With Libraries`
+4. Run your project (`Cmd+R`)<
+
+#### Android
+
+1. Open up `android/app/src/main/java/[...]/MainActivity.java`
+  - Add `import com.reactlibrary.RNInputRecordPackage;` to the imports at the top of the file
+  - Add `new RNInputRecordPackage()` to the list returned by the `getPackages()` method
+2. Append the following lines to `android/settings.gradle`:
+  	```
+  	include ':react-native-local-image'
+  	project(':react-native-local-image').projectDir = new File(rootProject.projectDir, 	'../node_modules/react-native-local-image/android')
+  	```
+3. Insert the following lines inside the dependencies block in `android/app/build.gradle`:
+  	```
+      compile project(':react-native-local-image')
+  	```
+
+#### Windows
+[Read it! :D](https://github.com/ReactWindows/react-native)
+
+1. In Visual Studio add the `RNInputRecord.sln` in `node_modules/react-native-local-image/windows/RNInputRecord.sln` folder to their solution, reference from their app.
+2. Open up your `MainPage.cs` app
+  - Add `using Com.Reactlibrary.RNInputRecord;` to the usings at the top of the file
+  - Add `new RNInputRecordPackage()` to the `List<IReactPackage>` returned by the `Packages` method
+
+
+## Usage
+```javascript
+import RNInputRecord from 'react-native-local-image';
+
+// TODO: What to do with the module?
+RNInputRecord;
+```
+  

android/build.gradle

@@ -0,0 +1,36 @@
+
+buildscript {
+    repositories {
+        jcenter()
+    }
+
+    dependencies {
+        classpath 'com.android.tools.build:gradle:1.3.1'
+    }
+}
+
+apply plugin: 'com.android.library'
+
+android {
+    compileSdkVersion 23
+    buildToolsVersion "23.0.1"
+
+    defaultConfig {
+        minSdkVersion 16
+        targetSdkVersion 22
+        versionCode 1
+        versionName "1.0"
+    }
+    lintOptions {
+        abortOnError false
+    }
+}
+
+repositories {
+    mavenCentral()
+}
+
+dependencies {
+    compile 'com.facebook.react:react-native:+'
+}
+  

android/src/main/AndroidManifest.xml

@@ -0,0 +1,6 @@
+
+<manifest xmlns:android="http://schemas.android.com/apk/res/android"
+          package="com.local.image">
+
+</manifest>
+  

android/src/main/java/com/local/image/RCTLocalImageViewManager.java

@@ -0,0 +1,38 @@
+package com.local.image;
+
+import android.graphics.Bitmap;
+import android.graphics.BitmapFactory;
+import android.util.Log;
+import android.widget.ImageView;
+
+import com.facebook.react.uimanager.SimpleViewManager;
+import com.facebook.react.uimanager.ThemedReactContext;
+import com.facebook.react.uimanager.annotations.ReactProp;
+
+/**
+ * Created by dowin on 2017/7/7.
+ */
+
+public class RCTLocalImageViewManager extends SimpleViewManager<ImageView> {
+
+    final static String RCT_CLASS = "RNLocalImage";
+
+    @Override
+    public String getName() {
+        return RCT_CLASS;
+    }
+
+    @Override
+    protected ImageView createViewInstance(ThemedReactContext reactContext) {
+        ImageView imageView = new ImageView(reactContext);
+//        imageView.setScaleType(ImageView.ScaleType.CENTER_CROP);
+        return imageView;
+    }
+
+    @ReactProp(name = "path")
+    public void setPath(ImageView view, String path) {
+        Log.i(RCT_CLASS, "" + path);
+        Bitmap bm = BitmapFactory.decodeFile(path);
+        view.setImageBitmap(bm);
+    }
+}

android/src/main/java/com/local/image/RCTLocalPackage.java

@@ -0,0 +1,28 @@
+
+package com.local.image;
+
+import com.facebook.react.ReactPackage;
+import com.facebook.react.bridge.JavaScriptModule;
+import com.facebook.react.bridge.NativeModule;
+import com.facebook.react.bridge.ReactApplicationContext;
+import com.facebook.react.uimanager.ViewManager;
+
+import java.util.Arrays;
+import java.util.Collections;
+import java.util.List;
+public class RCTLocalPackage implements ReactPackage {
+    @Override
+    public List<NativeModule> createNativeModules(ReactApplicationContext reactContext) {
+      return Collections.emptyList();
+    }
+
+    @Override
+    public List<Class<? extends JavaScriptModule>> createJSModules() {
+      return Collections.emptyList();
+    }
+
+    @Override
+    public List<ViewManager> createViewManagers(ReactApplicationContext reactContext) {
+      return Arrays.<ViewManager>asList(new RCTLocalImageViewManager());
+    }
+}

index.js

@@ -0,0 +1,18 @@
+import React, {Component, PropTypes} from 'react';
+import {View, requireNativeComponent,NativeModules} from 'react-native';
+
+export default class RNLocalImage extends Component {
+
+    render() {
+        return (
+            <RNLocalImageApi
+                {...this.props}
+            />);
+    }
+}
+RNLocalImage.propTypes = {
+    ...View.propTypes,
+    path:PropTypes.string,
+
+};
+const RNLocalImageApi = requireNativeComponent('RNLocalImage', RNLocalImage);

package.json

@@ -0,0 +1,18 @@
+
+{
+  "name": "react-native-local-image",
+  "version": "1.0.0",
+  "description": "",
+  "main": "index.js",
+  "scripts": {
+    "test": "echo \"Error: no test specified\" && exit 1"
+  },
+  "keywords": [
+    "react-native"
+  ],
+  "author": "",
+  "license": "",
+  "peerDependencies": {
+    "react-native": "^0.41.2"
+  }
+}