官网toast例子

此篇博主有组件封装详细讲解： https://www.jianshu.com/p/f26d994ea765

一、创建两个文件，一个是toast模块，一个用来注册toast模块

图片.png

（1）、ToastModule.java

// ToastModule.java

package com.base60;

import android.widget.Toast;

import com.facebook.react.bridge.NativeModule;
import com.facebook.react.bridge.ReactApplicationContext;
import com.facebook.react.bridge.ReactContext;
import com.facebook.react.bridge.ReactContextBaseJavaModule;
import com.facebook.react.bridge.ReactMethod;

import java.util.Map;
import java.util.HashMap;

public class ToastModule extends ReactContextBaseJavaModule {
  private static ReactApplicationContext reactContext;

  private static final String DURATION_SHORT_KEY = "SHORT";
  private static final String DURATION_LONG_KEY = "LONG";

  public ToastModule(ReactApplicationContext context) {
    super(context);
    reactContext = context;
  }

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

         @Override
         public Map<String, Object> getConstants() {
           final Map<String, Object> 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();
          };
}

（2）、注册ToastModule模块

// CustomToastPackage.java

package com.base60;

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 CustomToastPackage implements ReactPackage {

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

  @Override
  public List<NativeModule> createNativeModules(
                              ReactApplicationContext reactContext) {
    List<NativeModule> modules = new ArrayList<>();

    modules.add(new ToastModule(reactContext));   //要对应上名字

    return modules;
  }

}

二、MainApplication.java中文件的getPackages方法中提供

图片.png

三、我们使用原生模块是 NativeModules.xxx , 也可以封装成js模块

若是不封装则直接使用NativeModules.ToastExample.show('Awesome', ToastExample.LONG)就可以了
封装使用则如下
js 模块 ToastExample.js

import { NativeModules } from 'react-native';
// ToastModule.java 中 ToastExample 定义的
// public String getName()中返回的字符串
export default NativeModules.ToastExample;

四、页面使用

import React, {Component} from 'react';
import {View, Text, StyleSheet, Image, TouchableOpacity} from 'react-native'
import TXCloudVedioView from "../common/TXCloudVideoView";
import ToastExample from '../ToastExample';

class Test extends Component {
    constructor(props) {
        super(props);
        this.state = {}
    }

    componentDidMount() {
    }

    ToShow(){
        ToastExample.show('Awesome', ToastExample.LONG);
    }

    render() {
        return (
            <View style={{flex: 1}}>
                <View style={{height:200,width:'100%',backgroundColor:'#ddd'}}>
                    <TXCloudVedioView
                        style={{width: '100%', height: '100%'}}
                        url={`rtmp://58.200.131.2:1935/livetv/hunantv`}
                        // url={`rtmp://58.200.131.2:1935/livetv/cctv13`}
                    />
                </View>
                <TouchableOpacity onPress={()=>this.ToShow()}>
                    <Text style={{padding:20,backgroundColor:'#999'}}>按钮</Text>
                </TouchableOpacity>
            </View>
        );
    }
}

export default Test;
const styles = StyleSheet.create({})