React Native calling Gomobile compiled SDK

Recently there is a project architecture is react native write application interface, go write the bottom, general idea: react native can call native code through Nativemodules, The go code can be compiled into the Android. arr file and the iOS. framework file through the Gomobile framework to enable js->java/oc->go calls by adding dependent files to the local.
The successful process of running from the installation environment is now documented here:

The whole process:

1, build go environment;
2,clone gomobile Framework, writing go code, compiled into .arr&&.framework; by gomobile
3, build react native environment, initialize a react native project;
4, add the. Arr dependency in the React native app via Android Studio, Add. framework dependencies in Xcode;
5, write Android&&ios call native code via nativemodules;

1th step, build the Go language environment

For download and installation please refer to:
Go language development environment construction detailed
There is a pit, the Mac directly after downloading the installation of PKG, you need to go manually. Bash_profile inside add goroot and Gopath, or gomobile build when prompted not to find the NDK, for details please refer to:
Go environment variable Configuration

2nd step, build Gomobile environment

For specific steps, please refer to:
Https://github.com/golang/go/wiki/Mobile
It is important to note that:
1,go get Golang.org/x/mobile/cmd/gomobile command is wall, you can clone the Gomobile project to $gopath/src/golang.org/x, then execute gomobile Init

This compiles the Hello.go file under the example directory under Gomobile
The go code is simple:

package helloimport "fmt"func Greetings(name string) string {    return fmt.Sprintf("Welcome To Tradove.\nHello, %s!", name)}

Then compile the Android. arr file:
gomobile bind -target=android golang.org/x/mobile/example/bind/hello
Build the. framework file for iOS
gomobile bind -target=ios golang.org/x/mobile/example/bind/hello
Note:
Mac 下.arr和.framework文件会被放在用户根目录下面

3rd Step: Build react Native environment:

Not much here, please refer to the official website:
Https://facebook.github.io/react-native/docs/0.55/getting-started.html
Initialize a React native project
The page is simple, just a button

type Props = {};export default class App extends Component<Props> {    render() {        return (            <View style={styles.container}>                <TouchableOpacity onPress={() => {                    this._getFromNative();                }} style={styles.touchView}><Text                    style={styles.touchText}>{' get values from native '}</Text></TouchableOpacity>            </View>        );    }    _getFromNative() {        const rnParam = Platform.select({            ios: 'str from ios',            android: 'str from android'        });        GoMobileModules.getNativeGo(rnParam, (str) => {            alert(str);        });    }}

4th step, the. arr and. Framework files are dependent into the react native project

Android section:
Use Android Studio to open the React Native Project catalog/android (note Pop-up prompts do not update when prompted)
Choose
File->new module->import. Jar/.arr Package

001.png

Then add the following line in the App/build.gradle file dependencies
compile project(':hello')
For details, refer to:
Android studio2.3 Import AAR Package
iOS section:
Open the React Native project catalog using Xcode/ios

1. Download the required third party provided by the. Framework

2) Copy the third-party. framework files to the folder in which the project is located

001.png

(Copy the file in)

3. Select the project name

4) Select targets

5) Check Build phases

6) Add in link Binary with libraries

002.png

5th step, write react native call Android&&ios call native code

For more information, please refer to:
Over here
Android section:
Gomobilebridge.class

public class GoMobileBridge implements ReactPackage {    @Override    public List<NativeModule> createNativeModules(ReactApplicationContext reactContext) {        List<NativeModule> modules = new ArrayList<>();        modules.add(new GoMobileModule(reactContext));        return modules;    }    @Override    public List<ViewManager> createViewManagers(ReactApplicationContext reactContext) {        return Collections.emptyList();    }}

Gomobilemodule.class

public class GoMobileModule extends ReactContextBaseJavaModule {    public GoMobileModule(ReactApplicationContext reactContext) {        super(reactContext);    }    @Override    public String getName() {        return this.getClass().getSimpleName();    }    @Nullable    @Override    public Map<String, Object> getConstants() {        return super.getConstants();    }    @ReactMethod    public void getNativeGo(String rnStr, Callback callback) {        String greetings = hello.Hello.greetings(rnStr);        callback.invoke(greetings);    }}

iOS native code:
GoMobileModule.h

#ifndef GoMobileModule_h#define GoMobileModule_h#import <Foundation/Foundation.h>#import <React/RCTBridgeModule.h>@interface GoMobileModule : NSObject<RCTBridgeModule>@end#endif /* GoMobileModule_h */

Gomobilemodule.m

#import "GoMobileModule.h"#import <React/RCTLog.h>#import "Hello/Hello.h"@implementation GoMobileModuleRCT_EXPORT_MODULE();//从go层获取数据RCT_EXPORT_METHOD(getNativeGo:(NSString *) rnStr :(RCTResponseSenderBlock)callback{  NSString *goStr=HelloGreetings(rnStr);  callback(@[goStr]);});@end

Operation Result:

001.png
002.png