React Native跳转Android原生界面

摘要：故事发生的起因是RN android因为获取一个验证码cookie的后续问题太麻烦

RN注册监听

componentWillMount(){
  InteractionManager.runAfterInteractions(()=>{
      this.passwordListener=DeviceEventEmitter.addListener(‘PassWordMessage‘,this.receiveAndroidMessage);
      this.startMyActivity();
    })
}

RN监听的回调方法

receiveAndroidMessage = (msg) => {
    console.log("回调-->" + msg);
    if(msg.indexOf(‘,‘)!=-1){
      //从回调消息的字符串根据‘,‘拆分，得到字符串数组passwordMessage
      var passwordMessage = msg.split(",");
      let mId=passwordMessage[0];
      let mToken=passwordMessage[1];
      let mMsg=passwordMessage[2];
      //移除监听
      if(this.passwordListener!=null){
          this.passwordListener.remove();
        }
        //跳转页面
      this.props.navigator.push({
                name: ‘phonerest‘,
                component:PhoneReset,
                params:{
                    id:mId,
                    token:mToken,
                    msg:mMsg
                }
              });

    }else{
      if(this.passwordListener!=null){
          this.passwordListener.remove();
        }
      //back
      this._navLeftClick();
    }
  };

RN调用原生Locatfb类的startMyActivity();

startMyActivity = () => {
  NativeModules.Locatfb.startMyActivity();
}

原生Locatfb类

package com.xxxxxximport android.Manifest;
import android.app.Activity;
import android.content.Context;
import android.content.Intent;
import android.content.pm.PackageManager;
import android.location.Criteria;
import android.location.Location;
import android.location.LocationListener;
import android.location.LocationManager;
import android.os.Bundle;
import android.support.v4.app.ActivityCompat;
import android.widget.Toast;

import com.facebook.react.bridge.ActivityEventListener;
import com.facebook.react.bridge.ReactApplicationContext;
import com.facebook.react.bridge.ReactContextBaseJavaModule;
import com.facebook.react.bridge.ReactMethod;
import com.facebook.react.modules.core.DeviceEventManagerModule;

public class Locatfb extends ReactContextBaseJavaModule implements ActivityEventListener {

   //private String locationProvider;
   private ReactApplicationContext mContext;

  public Locatfb(ReactApplicationContext reactContext) {
    super(reactContext);
    mContext=reactContext;
  }
  @Override
  public String getName() {
    return "Locatfb";
  }

    @ReactMethod
    public void startMyActivity(){
        Intent intent = new Intent(mContext,ResetPassword.class);
        //intent.setFlags(Intent.FLAG_ACTIVITY_NEW_TASK);
        Bundle bundle=new Bundle();
        mContext.addActivityEventListener(this);//增加监听 让当前类的onActivityResult来处理
        mContext.startActivityForResult(intent,100,bundle);

    }

    @Override
    public void onActivityResult(Activity activity, int requestCode, int resultCode, Intent intent) {
        switch (requestCode) {
            case 100:
                if (resultCode == 101) {
                    String backActivity = intent.getStringExtra("message");
                    sendPassWordMessage(backActivity);
                }
                if (resultCode == 102) {
                    String passwordMessage = intent.getStringExtra("message");
                    sendPassWordMessage(passwordMessage);
                }
                break;

            default:
        }
    }

    @Override
    public void onNewIntent(Intent intent) {

    }

    //将消息msg发送给RN侧  public void sendPassWordMessage(String passwordStr){
        mContext.getJSModule(DeviceEventManagerModule.RCTDeviceEventEmitter.class).emit("PassWordMessage",passwordStr);
    }

}

原生展示的Activity

package com.xxxxxx;

import android.app.Activity;
import android.content.Intent;
import android.graphics.Bitmap;
import android.os.Bundle;
import android.util.Log;
import android.view.View;
import android.widget.EditText;
import android.widget.ImageView;
import android.widget.Toast;

import com.lzy.okhttputils.OkHttpUtils;
import com.lzy.okhttputils.callback.BitmapCallback;
import com.lzy.okhttputils.callback.StringCallback;

import org.json.JSONException;
import org.json.JSONObject;

import java.text.SimpleDateFormat;
import java.util.Date;

import okhttp3.Call;
import okhttp3.Response;

public class ResetPassword extends Activity{

    private EditText phoneText,verifyText;
    private ImageView verifyImg;
    private String API_HOME="https://www.xxxxxxxxxx.com";

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_reset_password);
        verifyImg= (ImageView) findViewById(R.id.verifyImg);
        phoneText= (EditText) findViewById(R.id.phoneText);
        verifyText= (EditText) findViewById(R.id.verifyText);
        Intent intent = getIntent();
        this.fetch();
    }

    private void fetch() {
        String time=new SimpleDateFormat("yyyy-MM-dd hh:mm:ss").format(new Date());
        Log.d("formatter------->",time);
　　　　　//获取验证码图片
        OkHttpUtils.get(API_HOME+"xxxxxxxxxxx"+"?date="+time)//
                .tag(this)//
                .execute(new BitmapCallback() {
                    @Override
                    public void onSuccess(Bitmap bitmap, Call call, Response response) {
                        Log.d("bitmap------->",bitmap+"");
                        verifyImg.setImageBitmap(bitmap);
                    }

                    @Override
                    public void onError(Call call, Response response, Exception e) {
                        super.onError(call, response, e);
                        Log.d("response------->",response+"");
                    }
                });
    }

　　//提交相关数据
    public void buttonClick(View view){
        String phone=phoneText.getText().toString();
        String identify=verifyText.getText().toString();
        OkHttpUtils.post(API_HOME+"xxxxxxxxxxxx")//
                .tag(this)//
                .params("phone", phone)
                .params("numcode", identify)
                .execute(new StringCallback() {
                    @Override
                    public void onSuccess(String s, Call call, Response response) {
                        Log.d("s------->",s);
                        try {
                            JSONObject jsonObject =new JSONObject(s);
                            String statusCode=jsonObject.getString("statusCode");
                            String msg=jsonObject.getString("msg");
                            if(statusCode=="0"){
                                String id=jsonObject.getString("id");
                                String token=jsonObject.getString("token");

                                String passwordMessage=id+","+token+","+msg;
                                //Log.d("passwordMessage------->",passwordMessage);
　　　　　　　　　　　　　　　　　　　//intent携带所需数据回传
                                Intent intent = new Intent();
                                intent.putExtra("message",passwordMessage);
                                setResult(102, intent);　　　　　　　　　　　　　　　　　　　//当前界面干掉
                                finish();
                            }else{
                                Toast.makeText(ResetPassword.this,msg,Toast.LENGTH_SHORT).show();
                            }

                        } catch (JSONException e) {
                            e.printStackTrace();
                        }

                    }

                    @Override
                    public void onError(Call call, Response response, Exception e) {
                        super.onError(call, response, e);
                        Log.d("response------->",response+"");
                    }
                });
    }
　　
　　//直接点击返回键，intent携带数据回传
    public void backClick(View view){
        Intent intent = new Intent();
        intent.putExtra("message","backActivity");
        setResult(101, intent);
        finish();
    }

　　//更换验证码
    public void verifyImageClick(View v){
        fetch();
    }
}

原生引用的网络框架app/build.gradle

dependencies {
   。。。
    compile ‘com.lzy.net:okhttputils:+‘  //版本号使用 + 可以自动引用最新版
}

okhttputils在onCreate（）相关设置

package com.xxxxxx;

import android.app.Application;

import com.RNFetchBlob.RNFetchBlobPackage;
import com.beefe.picker.PickerViewPackage;
import com.blueprintalpha.rnandroidshare.RNAndroidSharePackage;
import com.cboy.rn.splashscreen.SplashScreenReactPackage;
import com.facebook.react.ReactApplication;
import com.facebook.react.ReactNativeHost;
import com.facebook.react.ReactPackage;
import com.facebook.react.shell.MainReactPackage;
import com.facebook.soloader.SoLoader;
import com.geektime.rnonesignalandroid.ReactNativeOneSignalPackage;
import com.github.alinz.reactnativewebviewbridge.WebViewBridgePackage;
import com.imagepicker.ImagePickerPackage;
import com.lzy.okhttputils.OkHttpUtils;
import com.lzy.okhttputils.cookie.store.MemoryCookieStore;
import com.lzy.okhttputils.cookie.store.PersistentCookieStore;
import com.lzy.okhttputils.model.HttpHeaders;
import com.lzy.okhttputils.model.HttpParams;
import com.oblador.vectoricons.VectorIconsPackage;
import com.rota.rngmaps.RNGMapsPackage;
import com.syarul.rnalocation.RNALocation;

import java.util.Arrays;
import java.util.List;

import cl.json.RNSharePackage;

public class MainApplication extends Application implements ReactApplication {

  private static final AnExampleReactPackage myReactPackage=new AnExampleReactPackage();

  private final ReactNativeHost mReactNativeHost = new ReactNativeHost(this) {
    @Override
    public boolean getUseDeveloperSupport() {
      return BuildConfig.DEBUG;
    }

    @Override
    protected List<ReactPackage> getPackages() {
      return Arrays.<ReactPackage>asList(
          new MainReactPackage(),
           。。。。。。
            myReactPackage
      );
    }
  };

  @Override
  public ReactNativeHost getReactNativeHost() {
    return mReactNativeHost;
  }

  @Override
  public void onCreate() {
    super.onCreate();
    SoLoader.init(this, /* native exopackage */ false);
    HttpHeaders headers = new HttpHeaders();
    headers.put("commonHeaderKey1", "commonHeaderValue1");    //所有的 header 都 不支持 中文
    headers.put("commonHeaderKey2", "commonHeaderValue2");
    HttpParams params = new HttpParams();
    params.put("commonParamsKey1", "commonParamsValue1");     //所有的 params 都 支持 中文
    params.put("commonParamsKey2", "这里支持中文参数");

    //必须调用初始化
    OkHttpUtils.init(this);
    //以下都不是必须的，根据需要自行选择
    OkHttpUtils.getInstance()//
            .debug("OkHttpUtils")                                              //是否打开调试
            .setConnectTimeout(OkHttpUtils.DEFAULT_MILLISECONDS)               //全局的连接超时时间
            .setReadTimeOut(OkHttpUtils.DEFAULT_MILLISECONDS)                  //全局的读取超时时间
            .setWriteTimeOut(OkHttpUtils.DEFAULT_MILLISECONDS)                 //全局的写入超时时间
            .setCookieStore(new MemoryCookieStore())                           //cookie使用内存缓存（app退出后，cookie消失）
            .setCookieStore(new PersistentCookieStore())                       //cookie持久化存储，如果cookie不过期，则一直有效
            .addCommonHeaders(headers)                                         //设置全局公共头
            .addCommonParams(params);

  }
}

原生模块管理

package com.xxxxxx;
import com.facebook.react.ReactActivity;
import com.facebook.react.ReactPackage;
import com.facebook.react.shell.MainReactPackage;
import com.facebook.react.bridge.ReactApplicationContext;
import com.facebook.react.bridge.NativeModule;
import com.facebook.react.bridge.JavaScriptModule;
import com.facebook.react.uimanager.UIManagerModule;
import com.facebook.react.uimanager.ViewManager;
import android.app.Activity;
import java.util.ArrayList;
import java.util.Arrays;
import java.util.List;
import java.util.Collections;
class AnExampleReactPackage implements ReactPackage {

  //添加原生模块
  @Override
  public List<NativeModule> createNativeModules(ReactApplicationContext reactContext) {
    List<NativeModule> modules = new ArrayList<>();
    modules.add(new Locatfb(reactContext));
    return modules;
  }

  @Override
  public List<Class<? extends JavaScriptModule>> createJSModules() {
    return Collections.emptyList();
  }
//添加原生组件
  @Override
  public List<ViewManager> createViewManagers(ReactApplicationContext reactContext) {
    return Collections.emptyList();
  }

 }

AndroidManifest.xml文件

<?xml version="1.0" encoding="utf-8"?>
<manifest xmlns:android="http://schemas.android.com/apk/res/android"
    package="com.xxxxxx"
    android:versionCode="2"
    android:versionName="1.4">

    <uses-sdk
        android:minSdkVersion="16"
        android:targetSdkVersion="22" />

    <uses-permission android:name="android.permission.INTERNET" />
    <uses-permission android:name="android.permission.SYSTEM_ALERT_WINDOW" />
    <uses-permission android:name="android.permission.ACCESS_COARSE_LOCATION" /> <!-- Approximate location - If you want to use promptLocation for letting OneSignal know the user location. -->
    <uses-permission android:name="android.permission.ACCESS_FINE_LOCATION" /> <!-- Precise location If you want to use promptLocation for letting OneSignal know the user location. -->
    <uses-permission android:name="android.permission.ACCESS_LOCATION" />
    <uses-permission android:name="android.permission.CAMERA" />
    <uses-permission android:name="android.permission.USE_CREDENTIALS" />
    <uses-permission android:name="android.permission.READ_EXTERNAL_STORAGE" />
    <uses-permission android:name="android.permission.WRITE_EXTERNAL_STORAGE" />
    <uses-permission android:name="android.permission.READ_PHONE_STATE" />

    <application　　　　　//调用Application必须添加
        android:name=".MainApplication"
        。。。。。。>
        <activity
            android:name=".MainActivity"
            android:configChanges="keyboard|keyboardHidden|orientation|screenSize"
            android:label="@string/app_name"
            android:launchMode="singleTop">
            <intent-filter>
                <action android:name="android.intent.action.MAIN" />

                <category android:name="android.intent.category.LAUNCHER" />
            </intent-filter>
        </activity>
        <activity android:name="com.facebook.react.devsupport.DevSettingsActivity" />
    　　//原生新增页面必须注册
        <activity android:name=".ResetPassword"></activity>
    </application>

</manifest>
时间： 2024-11-08 20:42:41

React Native跳转Android原生界面的相关文章

React Native – 使用 JavaScript 开发原生应用

前不久,Facebook 在F8开发者大会上正式开源了 React Native 项目.不过目前只有 iOS 版,Android 版还需要再等一段时间,这是最新的用 JavaScript 语言开发原生 App 的尝试,其示例代码相当简洁,内置控件也不少.Facebook 同时还为 React Native 开发了一款基于 Atom 的IDE--Nuclide,也已开源. http://facebook.github.io/react-native/docs/getting-started.htm

React Native集成到Android项目当中

集成到Android项目当中 安装JavaScript依赖包 在项目根目录下创建一个名为package.json的空文本文件,然后填入以下内 { "name": "MyReactNativeApp", "version": "0.0.1", "private": true, "scripts": { "start": "node node_modules/r

React Native自学--嵌入到原生应用

之前按照官网的步骤,实现的第一步的"Hello World"!对于每一个android的开发,我想没有一个愿意只是开发一些js开发的,要了解原生和js交互才是我们的目标. 根据官网的操作,开始嵌入原生应用.具体操作对着官网操作应该没问题.说几个我遇到的问题吧. install 的时候,会创建一个.json的配置文件,这时候通过命令行操作的时候,会让你输入一些参数,比如name什么的,第一字没细看,我还以为我操作错了呢.当配置文件生成之后,需要将scripts下面的原来的参数改成官网给的

React Native DEMO for Android

Demo1: 主要知识:navigator,fecth 地址:https://github.com/hongguangKim/ReactNativeDEMO1 Demo2: 主要知识:navigator,fecth,react-native-tab-navigator 地址:https://github.com/hongguangKim/ReactNativeDEMO2 Demo3: 主要知识:react-native-swiper,Animated 地址:https://github.com/

React Native Android 应用层实战沦陷记

[工匠若水 http://blog.csdn.net/yanbober 未经允许严禁转载,请尊重作者劳动成果.私信联系我] 1 背景 一眨眼又一年快要过去了,原计划今年的最后一个小目标(React Native)看样子要留尾巴到明年了,React Native 想说爱你不容易.怎么评价你呢?应用层 JSX 编写还是很友好的,尼玛框架接入的各种锅却让人痛哭不已,万事开头难,对于 React Native 的接入可以说大量工作可能都需要投入到框架接入中(各种灰度实验的兼容性.各种锅),一旦接入稳定以

【React Native开发】React Native For Android环境配置以及第一个实例

转载请标明出处: http://blog.csdn.net/developer_jiangqq/article/details/50456967 本文出自:[江清清的博客] (一)前言 FaceBook早期开源发布了React Native For IOS,终于在2015年9月15日也发布了ReactNative for Android,虽然Android版本的项目发布比较迟,但是也没有阻挡了广大开发者的热情.可以这样讲在2015年移动平台市场上有两个方向技术研究比较火,第一种为阿里,百度,腾讯

Android React Native在Android Studio中执行bundleReleaseJsAndAssets 打包失败的解决方法

这个坑在文章记一次在Windows上搭建React Native Android环境踩过的坑中我已经提到过,当时找不到解决方法,只能开一个命令提示符终端独立执行打包.就像这样子 react-native bundle --platform android --dev false --entry-file index.android.js --bundle-output C:\Users\Administrator\Desktop\AwesomeProject\android\app\build\

【React Native】在原生和React Native间通信

一.从React Native中调用原生方法(原生模块) 原生模块是JS中也可以使用的Objective-C类.一般来说这样的每一个模块的实例都是在每一次通过JS bridge通信时创建的.他们可以导出任意的函数和常量给React Native.相关细节可以参阅这篇文章. 在React Native中,一个“原生模块”就是一个实现了“RCTBridgeModule”协议的Objective-C类,其中RCT是ReaCT的缩写. // CalendarManager.h #import <Reac

东方耀 手把手教React Native实战开发视频教程+源码笔记全集

课程序号标题 第0课0.手把手教React Native实战之开山篇_视频 第1课1.手把手教React Native实战之环境搭建_视频_Windows环境 第1课1.手把手教React Native实战之环境搭建[Mac真机]同时调试开发Android&IOS 第2课2.手把手教React Native实战之从React到RN 第3课3.手把手教React Native实战之flexbox布局(RN基础) 第4讲4.手把手教React Native实战之flexbox布局(伸缩属性) 第5讲