react native 接入QQ登陆（Android）

Posted 2020-12-16

• 官方地址：https://wiki.connect.qq.com/qq登录

• 添加 open_sdk_xxxx_lite.jar

• 必要权限

<uses-permission android:name="android.permission.INTERNET" />
<uses-permission android:name="android.permission.ACCESS_NETWORK_STATE" />
<uses-permission android:name="android.permission.ACCESS_WIFI_STATE" />

• 注册 Activity

<activity
    android:name="com.tencent.tauth.AuthActivity"
    android:launchMode="singleTask"
    android:noHistory="true">
    <intent-filter>
        <action android:name="android.intent.action.VIEW" />

        <category android:name="android.intent.category.DEFAULT" />
        <category android:name="android.intent.category.BROWSABLE" />

        <data android:scheme="tencent你的AppId" />
    </intent-filter>
</activity>
<activity
    android:name="com.tencent.connect.common.AssistActivity"
    android:configChanges="orientation|keyboardHidden"
    android:screenOrientation="behind"
    android:theme="@android:style/Theme.Translucent.NoTitleBar" />

• MainActivity.java

public class MainActivity extends ReactActivity {

    static MyListener listener;
    static Tencent tencent;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);

        tencent = Tencent.createInstance("AppId", this);
        listener = new MyListener();

    }

    private static class MyListener implements IUiListener {
        @Override
        public void onComplete(Object o) {
            JSONObject jsonObject = (JSONObject) o;
            try {
                String openid = jsonObject.getString("openid");
                WritableMap map = Arguments.createMap();
                map.putString("openid", openid);
                MyModule.promise.resolve(map);
            } catch (JSONException e) {
                MyModule.promise.reject(new Exception("操作失败"));
            }

        }

        @Override
        public void onError(UiError uiError) {
            MyModule.promise.reject(new Exception("操作失败"));
        }

        @Override
        public void onCancel() {
            MyModule.promise.reject(new Exception("操作失败"));
        }
    }

    @Override
    public void onActivityResult(int requestCode, int resultCode, Intent data) {
        super.onActivityResult(requestCode, resultCode, data);
        Tencent.onActivityResultData(requestCode, resultCode, data, listener);
    }
}

• MyModule.java 原生模块，供JS调用

public class MyModule extends ReactContextBaseJavaModule {

    private static ReactApplicationContext reactApplicationContext;
    public static Promise promise;

    @NonNull
    @Override
    public String getName() {
        return "MyModule";
    }

    MyModule(@NonNull ReactApplicationContext reactContext) {
        super(reactContext);
        reactApplicationContext = reactContext;
    }

    @ReactMethod
    public void qqLogin(Promise promise) {
        MyModule.promise = promise;
        MainActivity.tencent.login(getCurrentActivity(), "all", MainActivity.listener);
    }

}

• MyPackage.java 注册模块

public class MyPackage implements ReactPackage {
    @NonNull
    @Override
    public List<NativeModule> createNativeModules(@NonNull ReactApplicationContext reactContext) {
        List<NativeModule> modules = new ArrayList<>();
        modules.add(new MyModule(reactContext));
        return modules;
    }

    @NonNull
    @Override
    public List<ViewManager> createViewManagers(@NonNull ReactApplicationContext reactContext) {
        return Collections.emptyList();
    }
}

• javascript 端访问

import {
  ToastAndroid,
  NativeModules
} from ‘react-native‘;

NativeModules.MyModule.qqLogin().then(({ openid }) => {
      ToastAndroid.show(openid, ToastAndroid.SHORT)
    }).catch(reason => {
      console.log(reason)
    })