本文共 4447 字，大约阅读时间需要 14 分钟。

native 怎么写

自定义module

//ToastModule.javapackage com.retest;import android.widget.Toast;import com.facebook.react.bridge.ReactApplicationContext;import com.facebook.react.bridge.ReactContextBaseJavaModule;import com.facebook.react.bridge.ReactMethod;import java.util.HashMap;import java.util.Map;import javax.annotation.Nullable;public class ToastModule  extends ReactContextBaseJavaModule{
       private static final String DURATION_SHORT_KEY = "SHORT";    private static final String DURATION_LONG_KEY = "LONG";    public ToastModule(ReactApplicationContext reactContext) {        super(reactContext);    }    @Override    public String getName() {        return "TomToast";    }    @Nullable    @Override    public Map
   
     getConstants() {        final Map
    
      constants = new HashMap<>();        constants.put(DURATION_SHORT_KEY, Toast.LENGTH_SHORT);        constants.put(DURATION_LONG_KEY, Toast.LENGTH_LONG);        return constants;    }    @ReactMethod    public void show(String message,int duration){        Toast.makeText(getReactApplicationContext(),message,duration).show();    }}
    
   

添加到MyReactPackage

//MyReactPackage.javapackage com.retest;import com.facebook.react.ReactPackage;import com.facebook.react.bridge.NativeModule;import com.facebook.react.bridge.ReactApplicationContext;import com.facebook.react.uimanager.ViewManager;import java.util.ArrayList;import java.util.Collections;import java.util.List;public class MyReactPackage implements ReactPackage {
       @Override    public List
   
     createNativeModules(            ReactApplicationContext reactContext) {        List
    
      modules = new ArrayList<>();        modules.add(new ToastModule(reactContext));        return modules;    }    @Override    public List
     
       createViewManagers(ReactApplicationContext reactContext) {        return Collections.emptyList();    }}
     
    
   

在MainApplication里面添加

//MainApplication.javapackage com.retest;import android.app.Application;import com.facebook.react.ReactApplication;import com.AlexanderZaytsev.RNI18n.RNI18nPackage;import com.facebook.react.ReactNativeHost;import com.facebook.react.ReactPackage;import com.facebook.react.shell.MainReactPackage;import com.facebook.soloader.SoLoader;import com.st.TomCameraPackage;import java.util.Arrays;import java.util.List;public class MainApplication extends Application implements ReactApplication {
       private final ReactNativeHost mReactNativeHost = new ReactNativeHost(this) {        @Override        public boolean getUseDeveloperSupport() {            return BuildConfig.DEBUG;        }        @Override        protected List
   
     getPackages() {            return Arrays.
    
     asList(                    new MainReactPackage(),                    new RNI18nPackage(),                    new TomCameraPackage(),                    new MyReactPackage()                    );        }        @Override        protected String getJSMainModuleName() {            return "index";        }    };    @Override    public ReactNativeHost getReactNativeHost() {        return mReactNativeHost;    }    @Override    public void onCreate() {        super.onCreate();        SoLoader.init(this, /* native exopackage */ false);    }}
    
   

js 怎么调用

定义模块，引用native

//MyToast.js'use strict'; import {NativeModules} from 'react-native';export default NativeModules.TomToast; //"TomToast"要和native中定义的一致。

在自定义js中引用之前的js模块

//settings.js 用来使用MyToast.js/** * Sample React Native App * https://github.com/facebook/react-native * @flow */import React from 'react';import {    StyleSheet,    Button,    View} from 'react-native';import Ionicons from 'react-native-vector-icons/Ionicons';import TomToast from './MyToast';const _onButtonPressed=()=>{    TomToast.show('This is from Android Native', TomToast.SHORT);}export default class Settings extends React.Component {
       static navigationOptions = {        drawerLabel: 'Settings',        drawerIcon: ({tintColor, focused}) => (            
           ),    }    render() {        return (            
                   
    _onButtonPressed()}                    title="Click to show Native Toast!"                />                    );    }}const styles = StyleSheet.create({    container: {        flex: 1,        justifyContent: 'center',        alignItems: 'center',        backgroundColor: '#F5FCFF',    },     welcome: {        fontSize: 20,        textAlign: 'center',        margin: 10,    },});