react-native android 原生通信

import React from 'react';
import { Button, Image, View, Text,DeviceEventEmitter,ToastAndroid } from 'react-native';
import { createStackNavigator, createAppContainer } from 'react-navigation'; // 1.0.0-beta.27

class LogoTitle extends React.Component {
    render() {
        return (
            <Image
                source={require('./app_icon.png')}
                style={{ width: 30, height: 30 }}
            />
        );
    }
}

class HomeScreen extends React.Component {
    static navigationOptions = ({ navigation }) => {
        const params = navigation.state.params || {};

        return {
            headerTitle: <LogoTitle />,
            headerLeft: (
                <Button
                    onPress={() => navigation.navigate('MyModal')}
                    title="Info"
                    color="#fff"
                />
            ),
            headerRight: (
                <Button onPress={params.increaseCount} title="+1" color="#fff" />
            ),
        };


    };
    componentDidMount(){
        DeviceEventEmitter.addListener('nativeCallRn',(msg)=>{
            let title = "React Native界面,收到数据 HomeScreen :" + msg;
            console.log("React Native>> " + title)
            ToastAndroid.show("发送成功", ToastAndroid.SHORT);
        })

    }
    componentWillUnmount() {
        DeviceEventEmitter.removeAllListeners('nativeCallRn');
    }
    componentWillMount() {
        this.props.navigation.setParams({ increaseCount: this._increaseCount });

    }



    state = {
        count: 0,
    };

    _increaseCount = () => {
        this.setState({ count: this.state.count + 1 });
    };

    render() {
        return (
            <View style={{ flex: 1, alignItems: 'center', justifyContent: 'center' }}>
                <Text>Home Screen</Text>
                <Text>Count: {this.state.count}</Text>
                <Button
                    title="Go to Details"
                    onPress={() => {
                        /* 1. Navigate to the Details route with params */
                        this.props.navigation.navigate('Details', {
                            itemId: 86,
                            otherParam: 'First Details',
                        });
                    }}
                />
            </View>
        );
    }
}

class DetailsScreen extends React.Component {
    static navigationOptions = ({ navigation, navigationOptions }) => {
        const { params } = navigation.state;

        return {
            title: params ? params.otherParam : 'A Nested Details Screen',
            /* These values are used instead of the shared configuration! */
            headerStyle: {
                backgroundColor: navigationOptions.headerTintColor,
            },
            headerTintColor: navigationOptions.headerStyle.backgroundColor,
        };
    };
    componentDidMount(){

        DeviceEventEmitter.addListener('nativeCallRn',(msg)=>{
            let title = "React Native界面,收到数据 DetailsScreen :" + msg;
            console.log("React Native>> " + title)
            ToastAndroid.show("发送成功", ToastAndroid.SHORT);
        })
    }
    componentWillUnmount() {
        DeviceEventEmitter.removeAllListeners('nativeCallRn');
    }
    render() {
        /* 2. Read the params from the navigation state */
        const { params } = this.props.navigation.state;
        const itemId = params ? params.itemId : null;
        const otherParam = params ? params.otherParam : null;

        return (
            <View style={{ flex: 1, alignItems: 'center', justifyContent: 'center' }}>
                <Text>Details Screen</Text>
                <Text>itemId: {JSON.stringify(itemId)}</Text>
                <Text>otherParam: {JSON.stringify(otherParam)}</Text>
                <Button
                    title="Update the title"
                    onPress={() =>
                    {
                        this.props.navigation.setParams({ otherParam: 'Updated!' })
                        var {NativeModules} = require('react-native');
                        // let ExampleInterface = NativeModules.ExampleInterface;
                        NativeModules.ExampleInterface.HandleMessage('testMessage');
                    } }
                />
                <Button
                    title="Go to Details... again"
                    onPress={() => this.props.navigation.navigate('Details')}
                />
                <Button
                    title="Go back"
                    onPress={() => this.props.navigation.goBack()}
                />
            </View>
        );
    }
}

class ModalScreen extends React.Component {
    render() {
        return (
            <View style={{ flex: 1, alignItems: 'center', justifyContent: 'center' }}>
                <Text style={{ fontSize: 30 }}>This is a modal!</Text>
                <Button
                    onPress={() => this.props.navigation.goBack()}
                    title="Dismiss"
                />
            </View>
        );
    }
}

const MainStack = createStackNavigator(
    {
        Home: {
            screen: HomeScreen,
        },
        Details: {
            screen: DetailsScreen,
        },
    },
    {
        initialRouteName: 'Home',
        defaultNavigationOptions: {
            headerStyle: {
                backgroundColor: '#f4511e',
            },
            headerTintColor: '#fff',
            headerTitleStyle: {
                fontWeight: 'bold',
            },
        },
    }
);

const RootStack = createStackNavigator(
    {
        Main: {
            screen: MainStack,
        },
        MyModal: {
            screen: ModalScreen,
        },
    },
    {
        mode: 'modal',
        headerMode: 'none',
    }
);

const AppContainer = createAppContainer(RootStack);

export default class App extends React.Component {
    render() {
        return <AppContainer />;
    }
}
package com.learnrn3;

import android.content.Intent;
import android.util.Log;

import com.facebook.react.bridge.ActivityEventListener;
import com.facebook.react.bridge.ReactApplicationContext;
import com.facebook.react.bridge.ReactContextBaseJavaModule;
import com.facebook.react.bridge.ReactMethod;
import com.facebook.react.modules.core.DeviceEventManagerModule;

public class ExampleInterface extends ReactContextBaseJavaModule{
    ReactApplicationContext acontext;
    ActivityEventListener listener;
    public ExampleInterface(ReactApplicationContext reactContext) {
        super(reactContext);
        acontext = reactContext;
    }

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

    @ReactMethod
    public void HandleMessage(String message){
        Intent intent = new Intent(acontext,Main2Activity.class);
        intent.addFlags(Intent.FLAG_ACTIVITY_NEW_TASK);
        acontext.startActivity(intent);
    }

    public void nativeCallRn(String msg) {
        acontext.getJSModule(DeviceEventManagerModule.RCTDeviceEventEmitter.class)
                .emit("nativeCallRn",msg);
    }
}

 

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值