React native数据通信

  • 导航器传递参数给路由
  • 往导航栏传递参数
  • RN与原生模块通信

导航器传递参数给路由

示例：同导航器内的TestScreen1往TestScreen2传递了两个参数{params1:"1111",params2:"2222"}
APP.js

const taskNavigator = createStackNavigator({
    test1:TestScreen1,
    test2:TestScreen2
})

TestScreen1.js

 render() {
        return (
          <View style={{ flex: 1, justifyContent: 'center', alignItems: 'center' }}>
            <Text>第一个界面!</Text>
            <Button onPress = { () =>{
                this.props.navigation.navigate('test2',{params1:"1111",params2:"2222"})
            }}
            title = "进入第二个界面"/>
          </View>
        );

TestScreen2.js

  render() {
        return (
          <View style={{ flex: 1, justifyContent: 'center', alignItems: 'center' }}>
            <Text>第二个界面!</Text>
            <Text>{"params1 = " + this.props.navigation.state.params.params1}</Text>
            <Text>{"params2 = " + this.props.navigation.getParam("params2",2)}</Text>
            <Text>{"params3 = " + this.props.navigation.getParam("params3",3)}</Text>
          </View>
        );
      }

获取时可用两种方式，
第一种navigation.getParam(paramName,defaultValue)，参数不存在时，取默认值
第二种navigation.state.params. paramName， 如果未指定参数，它的值是 null。

20190730_141515.gif

往导航栏传递参数

使用this.props.navigation.setParams({paramName1: paramValue1,paramName2: paramValue2,...})的方式向导航栏传值
在导航栏中使用navigation.getParam(paramName,defaultValue)取值

export default class TestScreen1 extends Component {
  _paramsValue = 0;
    static navigationOptions = ({ navigation }) => { 
      return {
      title: '第一个界面' + navigation.getParam("param",""),
      headerLayoutPreset: "center",
      headerTitleStyle: {
        fontWeight: 'normal',
        fontSize: 16,
        flex: 1,
        textAlign: 'center'
      },
      headerStyle: {
        backgroundColor: 'white',
        elevation: 5,
      },
    }};
      render() {
        return (
          <View style={{ flex: 1, justifyContent: 'center', alignItems: 'center' }}>
            <Text>第一个界面!</Text>
            {/* <Button onPress = { () =>{
                this.props.navigation.navigate('test2',{params1:"1111",params2:"2222"})
            }}
            title = "进入第二个界面"/> */}
            <Button onPress = { () =>{
                this.props.navigation.setParams({param: ++this._paramsValue})
            }}
            title = "+1"/>
          </View>
        );
      }
    }
20190730_152051.gif

RN与原生模块通信

一.RN 调用安卓代码

经常会用到的场景比如获取一些安卓本地缓存数据等
具体步骤如下：
1.在Android端创建一个继承ReactContextBaseJavaModule的类，实现getName()方法，用来返回RN寻找到该类的名称

public class ClientModule extends ReactContextBaseJavaModule {

private ReactContext mReactContext;

public ClientModule(ReactApplicationContext reactContext) {
  super(reactContext);
  mReactContext = reactContext;
}

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

2.创建用于RN调用的方法，用@ReactMethod注解修饰

 @ReactMethod
  public void showToast(String message) {
    Toast.makeText(mReactContext,message,Toast.LENGTH_SHORT).show();
  }

这里创建了一个弹出原生Toast的方法。

3.创建一个实现ReactPackage接口的类，用来管理原生模块的Model，将继承了ReactContextBaseJavaModule的Model添加进去

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

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

4.将创建好的ClientPackage添加到包管理列表中

public class MainApplication extends Application implements ReactApplication {

  public static Context mContext;

  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(),
          new RNGestureHandlerPackage(),
          new ClientPackage()
      );
    }

    @Override
    protected String getJSMainModuleName() {
      return "index";
    }
  };

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

  @Override
  public void onCreate() {
    super.onCreate();
    SoLoader.init(this, /* native exopackage */ false);
    mContext = getApplicationContext();
  }
}

5.在RN中调用
导入组件

import {NativeModules} from 'react-native';
const clientModule = NativeModules.ClientModule;

在需要弹出的地方调用

  <Button onPress = { () =>{
                clientModule.showToast('这是一个原生Toast')
            }}
            title = "弹出原生Toast"/>
20190730_164743.gif
二. Promise 机制与安卓原生代码通信

Promise 机制需要在原生代码中创建一个桥接方法，当方法的最后一个参数书一个Promise对象时，该方法会返回给js一个与之对应的Promise对象
原生代码,在ClientModule中新增一个桥接方法

 @ReactMethod
 public void rnCallNativePromise(String message, Promise promise){
   Toast.makeText(mReactContext,message,Toast.LENGTH_SHORT).show();
   //得到组件名称
   String componentName = getCurrentActivity().getComponentName().toString();
   promise.resolve(componentName);
 }

在js中调用

 <Button onPress = { () => {
                clientModule.rnCallNativePromise('promise 弹出原生Toast')
                .then((msg) => {
                  Alert.alert('promise 收到消息', msg)
              }).catch((error) => {
                  console.log(error)
            }
          )}
         }
            title = "promise 弹出原生Toast"/>
          </View>
20190730_172909.gif
三.使用callback回调方式与安卓原生代码通信

原生代码,在ClientModule中新增一个桥接方法，传入一个成功和失败的Callback回调

 @ReactMethod
  public void rnCallNativeCallback(Callback success, Callback error) {
    try {
      success.invoke(100, 200);
    } catch (Exception e) {
      error.invoke(e.getMessage());
    }
  }

在js端调用

          <Button
            onPress={() => {
              clientModule.rnCallNativeCallback((x, y) => {
                Alert.alert('callback 收到消息', x + ',' + y)
              }, (error) => {
                console.log(error)
              })
            }
            }
            title="rn CallBack" />
20190730_174652.gif
四.使用RCTDeviceEventEmitter与原生通信

RCTDeviceEventEmitter类似一个EventBus消息传递机制，有发送方和接收方，与EventBus类似，在接收方需要注册监听，并在生命周期结束后取消监听

1.通过ReactApplicationContext的getJSModule方法获取到RCTDeviceEventEmitter, 调用emit(eventName, paramss)方法发送一个消息事件

因并不是原生代码所有的地方都有reactContext，所有建立一个工具类，在rn的model被加载后给工具类的静态变量reactContext赋值

ClientModule：

 public ClientModule(@Nonnull ReactApplicationContext reactContext) {
    super(reactContext);
    mReactContext = reactContext;
    ToReactNativtUtil.reactContext = reactContext;
  }

ToReactNativtUtil:

public class ToReactNativtUtil {
  public static ReactApplicationContext reactContext;
  public static void sendEvent(String eventName, @Nullable WritableMap paramss) {
    if(reactContext == null)return;
    reactContext
        .getJSModule(DeviceEventManagerModule.RCTDeviceEventEmitter.class)
        .emit(eventName, paramss);
  }
}

需要发送消息的地方
这里是直接在MainActivity启动后延时2s给RN发送一个登陆成功的事件，并传递一个userName参数

  @Override
  protected void onCreate(Bundle savedInstanceState) {
    super.onCreate(savedInstanceState);
    UiInstance.getInstance().postRunnableDelayedToHandler(new Runnable() {
      @Override
      public void run() {
       //给RN发送一个loginSucc的事件
        WritableMap writableMap= Arguments.createMap();
        writableMap.putString("userName","wenny");
        ToReactNativtUtil.sendEvent("loginSucc",writableMap);
      }
    },2000);
   
  }

2.在RN中通过DeviceEventEmitter来监听事件

import { DeviceEventEmitter } from 'react-native';

  componentDidMount() {
    DeviceEventEmitter.addListener('loginSucc', (writableMap) => {
      Alert.alert('接收到 loginSucc userName ：', writableMap.userName)
    });
  }
  componentWillUnmount() {
//移除监听
    this.subscription.remove();
  }
20190730_182814.gif
五.利用getLaunchOptions方法向js传递一个Bundle类型的数据

这种传递方式适用场景有：A（原生Activity）进入B（ReactActivity）时需要将A中的某些参数传递给B的js组件中。
原生端发送:

  @Override
  protected ReactActivityDelegate createReactActivityDelegate() {
    return new ReactActivityDelegate(this, getMainComponentName()) {
      @Override
      protected ReactRootView createRootView() {
        return new RNGestureHandlerEnabledRootView(MainActivity.this);
      }
      @Nullable
      @Override
      protected Bundle getLaunchOptions() {
        Bundle bundle = new Bundle();
        bundle.putString("newsItemId","123");
        bundle.putString("newsItemName","新闻标题1");
        return bundle;
      }
    };
  }

在js端的入口组件中获取，并通过导航器传参给路由
App.js

class App extends Component {
  appContainer
  constructor(props) {
    super(props);
    var newsItemId = this.props.newsItemId;
    var newsItemName = this.props.newsItemName;

    let stack = createStackNavigator({
      test1: TestScreen1,
      test2: TestScreen2
    }, {
        initialRouteParams: {
          newsItemId: newsItemId,
          newsItemName: newsItemName
        },
      })
      this.appContainer = createAppContainer(stack)
  }
  render() {
    return <this.appContainer />;
  }
}
AppRegistry.registerComponent("VideoProject", () => App);

TestScreen1.js

<Text >{navigation.getParam("newsItemId","-") +' ' + navigation.getParam("newsItemName","-")}</Text>
最后编辑于 ：
©著作权归作者所有,转载或内容合作请联系作者
  • 人面猴
    序言：七十年代末，一起剥皮案震惊了整个滨河市，随后出现的几起案子，更是在滨河造成了极大的恐慌，老刑警刘岩，带你破解...
    沈念sama阅读 206,214评论 6赞 481
  • 死咒
    序言：滨河连续发生了三起死亡事件，死亡现场离奇诡异，居然都是意外死亡，警方通过查阅死者的电脑和手机，发现死者居然都...
    沈念sama阅读 88,307评论 2赞 382
  • 救了他两次的神仙让他今天三更去死
    文/潘晓璐 我一进店门，熙熙楼的掌柜王于贵愁眉苦脸地迎上来，“玉大人，你说我怎么就摊上这事。” “怎么了？”我有些...
    开封第一讲书人阅读 152,543评论 0赞 341
  • 道士缉凶录：失踪的卖姜人
    文/不坏的土叔 我叫张陵，是天一观的道长。 经常有香客问我，道长，这世上最难降的妖魔是什么？ 我笑而不...
    开封第一讲书人阅读 55,221评论 1赞 279
  • 港岛之恋（遗憾婚礼）
    正文 为了忘掉前任，我火速办了婚礼，结果婚礼上，老公的妹妹穿的比我还像新娘。我一直安慰自己，他们只是感情好，可当我...
    茶点故事阅读 64,224评论 5赞 371
  • 恶毒庶女顶嫁案：这布局不是一般人想出来的
    文/花漫 我一把揭开白布。 她就那样静静地躺着，像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上，一...
    开封第一讲书人阅读 49,007评论 1赞 284
  • 城市分裂传说
    那天，我揣着相机与录音，去河边找鬼。 笑死，一个胖子当着我的面吹牛，可吹牛的内容都是我干的。 我是一名探鬼主播，决...
    沈念sama阅读 38,313评论 3赞 399
  • 双鸳鸯连环套：你想象不到人心有多黑
    文/苍兰香墨 我猛地睁开眼，长吁一口气：“原来是场噩梦啊……” “哼！你这毒妇竟也来了？” 一声冷哼从身侧响起，我...
    开封第一讲书人阅读 36,956评论 0赞 259
  • 万荣杀人案实录
    序言：老挝万荣一对情侣失踪，失踪者是张志新（化名）和其女友刘颖，没想到半个月后，有当地人在树林里发现了一具尸体，经...
    沈念sama阅读 43,441评论 1赞 300
  • 护林员之死
    正文 独居荒郊野岭守林人离奇死亡，尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 35,925评论 2赞 323
  • 白月光启示录
    正文 我和宋清朗相恋三年，在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 38,018评论 1赞 333
  • 活死人
    序言：一个原本活蹦乱跳的男人离奇死亡，死状恐怖，灵堂内的尸体忽然破棺而出，到底是诈尸还是另有隐情，我是刑警宁泽，带...
    沈念sama阅读 33,685评论 4赞 322
  • 日本核电站爆炸内幕
    正文 年R本政府宣布，位于F岛的核电站，受9级特大地震影响，放射性物质发生泄漏。R本人自食恶果不足惜，却给世界环境...
    茶点故事阅读 39,234评论 3赞 307
  • 男人毒药：我在死后第九天来索命
    文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹，春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 30,240评论 0赞 19
  • 一桩弑父案，背后竟有这般阴谋
    文/苍兰香墨 我抬头看了看天上的太阳。三九已至，却和暖如春，着一层夹袄步出监牢的瞬间，已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 31,464评论 1赞 261
  • 情欲美人皮
    我被黑心中介骗来泰国打工， 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留，地道东北人。 一个月前我还...
    沈念sama阅读 45,467评论 2赞 352
  • 代替公主和亲
    正文 我出身青楼，却偏偏与公主长得像，于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子，可洞房花烛夜当晚...
    茶点故事阅读 42,762评论 2赞 345