React-Native 学习--参数传递

原生端 –> RN端

//java端 传递
    private ReactRootView mReactRootView;
    private ReactInstanceManager mReactInstanceManager;

    ...

    mReactInstanceManager = ReactInstanceManager.builder()
                    ...
                .build();

    Bundle bundle = new Bundle();
    bundle.putString("name","原生传递参数。。。");

    mReactRootView.startReactApplication(mReactInstanceManager,"setting",bundle);
---------------
    //RN端 接收(通过props)
    render(){
        let name = this.props.name;
        return (
             <View style={styles.container}>

                <Text>
                    {name}
                </Text>
            </View>
        )
    }

RN端 –> 原生端

//RN端

    //1,注册java端声明的module
        import React from 'react';
        import { NativeModules } from 'react-native';

        //const NativeModule = {
        // toast: NativeModules.TToast;
        //};
        module.exports = NativeModules.TToast;

    //2,传参
        var LToast = NativeModules.TToast;
        ...
        render() {
            return (
                <View style={styles.container}>
                    <Text style={styles.hello}
                        onPress={this._showNativeToast.bind(this)}>
                        Hello,RN
                    </Text>
                </View>
              )
        }

        ...

        _showNativeToast(){
            //传递多个值 {'key1':'value1','key2':'value2'},java用ReadableMap,ReadableArray接收
            LToast.show('传递给原生。。',0);
        }

-----------------
    //java端

    //1,创建module

public class ToastAndroidModule extends ReactContextBaseJavaModule {
            public ToastAndroidModule(ReactApplicationContext reactContext) {
                super(reactContext);
            }

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

            //多个数据 ReadableMap,ReadableArray接收
            @ReactMethod
            public void show(String message,int duration) {
                Toast.makeText(getReactApplicationContext(),message,duration).show();
            }

        }

    //2,创建ReactPackage，添加module

        public class ToastReactPackage implements ReactPackage {
            @Override
            public List<NativeModule> createNativeModules(ReactApplicationContext reactContext) {
                List<NativeModule> modules = new ArrayList<>();
                //添加module
                modules.add(new ToastAndroidModule(reactContext));
                return modules;
            }

            @Override
            public List<Class<? extends JavaScriptModule>> createJSModules() {
                return Collections.emptyList();
            }

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

        //3,appliaction添加package

        public class MyApp extends Application implements ReactApplication {
            @Override
            public void onCreate() {
                super.onCreate();
                FileUtils.init(this);
            }

            private ReactNativeHost mHost = new ReactNativeHost(this) {
                @Override
                protected boolean getUseDeveloperSupport() {
                    return BuildConfig.DEBUG;
                }

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

        // @Nullable
        // @Override
        // protected String getJSBundleFile() {
        // return getExternalCacheDir().getAbsolutePath() + File.separator + "rn" + File.separator + "index.android.bundle";
            };

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

结束

继承ReactActivity的，貌似，没传参成功。。。。。。

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!