NativeAddRnDemo/index.android.js at master · sunlightAndroid/NativeAddRnDemo · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
/**
 * Sample React Native App
 * https://github.com/facebook/react-native
 * @flow
 */

import React, {Component} from 'react';
import {
    AppRegistry,
    StyleSheet,
    Text,
    NativeModules,
    View
} from 'react-native';

import PaintView from './NativePaintView';
export default class RNComponent extends Component {

    // 构造
    constructor(props) {
        super(props);
        // 初始状态
        this.state = {
            title: '',
        };
    }

    render() {
        tryCall = () => {
            var rnToastAndroid = NativeModules.MyNativeModule;
            rnToastAndroid.tryCallBack("luo", "131", (errorCallback) => {
                    alert(errorCallback)
                },
                (successCallback) => {
                    alert(successCallback);
                });
        };
        androidback = () => {

            var ANdroidNative = NativeModules.MyNativeModule;
            ANdroidNative.renderAndroidData((Callback) => {
                alert(Callback);

            });
        };

        return (

            <View style={styles.container}>

                <PaintView style={styles.paintview}
                           color={"#FF5984"}
                           raduis={100}
                />
                <Text style={styles.welcome}
                      onPress={this.call_button.bind(this)}
                >
                    React Native 调用原生方法!
                </Text>
                <Text style={styles.instructions}
                      onPress={() => androidback()}
                >
                    获得android回调的数据
                </Text>
                <Text style={styles.instructions}>

                    {NativeModules.MyNativeModule.rnCallNative(this.state.title)}
                </Text>

                <Text style={styles.instructions} onPress={() => tryCall()}>
                    trycallAndroid
                </Text>
            </View>
        );
    }

    call_button() {

        NativeModules.MyNativeModule.rnCallNative('调用原生方法的Demo');
    }

}
const styles = StyleSheet.create({
    container: {
        flex: 1,
        justifyContent: 'center',
        alignItems: 'center',
        backgroundColor: '#fff9c0',
    },
    welcome: {
        fontSize: 20,
        textAlign: 'center',
        margin: 10,
    },
    instructions: {
        textAlign: 'center',
        color: '#333333',
        marginBottom: 5,
    },
    paintview: {
        width: 100,
        height: 100,
        backgroundColor: '#000'
    },
});

AppRegistry.registerComponent('RNComponent', () => RNComponent);