如何使我的应用程序出现在vue native的共享列表中?

时间:2019-12-25 16:14:11

标签: android react-native vue.js react-native-android

我想知道如何在vue native中做到这一点。我希望我的应用程序能够接受图片以及url和文本

enter image description here

1 个答案:

答案 0 :(得分:1)

这就是您要寻找的。从Link

将这些行添加到您的AndroidManifest文件中。

<intent-filter>
  <action android:name="android.intent.action.SEND" />
  <category android:name="android.intent.category.DEFAULT" />
  <data android:mimeType="image/*" />
</intent-filter>

您的MainActivity.java

package com.sharewithapp;

import com.facebook.react.ReactActivity;

import com.facebook.react.ReactActivityDelegate;
import android.content.Intent;
import android.os.Bundle;
import android.net.Uri;

public class MainActivity extends ReactActivity {

  /**
   * Returns the name of the main component registered from JavaScript. This is used to schedule
   * rendering of the component.
   */
  @Override
  protected String getMainComponentName() {
    return "ShareWithApp";
  }

  @Override
    protected ReactActivityDelegate createReactActivityDelegate() {
        return new ReactActivityDelegate(this, getMainComponentName()) {

            @Override
            protected Bundle getLaunchOptions() {

                Intent intent = MainActivity.this.getIntent();
                Bundle bundle = new Bundle();
                Uri imageUri = intent.getParcelableExtra(Intent.EXTRA_STREAM);
                if (imageUri != null) {
                    bundle.putString("image", imageUri.toString());
                }else{
                    bundle.putString("image", "");
                }

                return bundle;
            }

        };
    }
}

App.vue文件将是

<template>
  <view class="container">
    <text class="text-color-primary">My Vue Native App</text>
            <image
          :style="{width: 50, height: 50}"
          :source="{uri: image}"
        />
  </view>
</template>

<style>
.container {
  background-color: white;
  align-items: center;
  justify-content: center;
  flex: 1;
}
.text-color-primary {
  color: blue;
}
</style>

<script>
export default {
  props: ['image']
}
</script>

有关链接的更多详细信息。