jlbu 发表于 2016-7-15 15:57:48

50课错误页面

点击后出现


/**
* Sample React Native App
* https://github.com/facebook/react-native
* @flow
*/

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

class RnAndroid01 extends Component {
render() {
    return (
      <View style={styles.container}>
      <Text style={styles.welcome}
      onPress={this.call_button.bind(this)}>
          Welcome to React Native888!
      </Text>
      <Text style={styles.instructions}>
          To get started, edit index.android.js
      </Text>
      <Text style={styles.instructions}>
          Shake or press menu button for dev menu
      </Text>
      </View>
    );
}
call_button(){
    NatvieModules.MyNativeModule.rnCallNative('-RN调用原生模块的方法');
}
}

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

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


jlbu 发表于 2016-7-15 15:59:03

MyNativeModule.java
package com.rnandroid01;

import android.content.Context;
import android.widget.Toast;

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

/**
* Created by Administrator on 2016/7/15.
*/
public class MyNativeModule extends ReactContextBaseJavaModule {
    private Context mContext;
    public MyNativeModule(ReactApplicationContext reactContext) {
      super(reactContext);
      mContext=reactContext;
    }
    @Override
    public String getName() {
      //一定要有这个名字,rn代码里面需要这个名字来调用该类方法
      return "MyNativeModule";
    }
    //函数不能有返回值,因为被调用的原生代码是异步的,原生代码执行结束后只能通过回调函数或者发送消息给rn那边
    @ReactMethod
    public void rnCallNative(String msg){
      Toast.makeText(mContext,msg,Toast.LENGTH_SHORT).show();
    }
}

jlbu 发表于 2016-7-15 15:59:29

MyReactPackage.java
package com.rnandroid01;

import com.facebook.react.ReactPackage;
import com.facebook.react.bridge.JavaScriptModule;
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;

/**
* Created by Administrator on 2016/7/15.
*/
public class MyReactPackage implements ReactPackage {
    @Override
    public List<NativeModule> createNativeModules(ReactApplicationContext reactContext) {
      List<NativeModule> modules=new ArrayList<>();
      modules.add(new MyNativeModule(reactContext));
      return modules;
    }

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

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

jlbu 发表于 2016-7-15 15:59:59

MainApplication.java

package com.rnandroid01;

import android.app.Application;
import android.util.Log;

import com.facebook.react.ReactApplication;
import com.facebook.react.ReactInstanceManager;
import com.facebook.react.ReactNativeHost;
import com.facebook.react.ReactPackage;
import com.facebook.react.shell.MainReactPackage;

import java.util.Arrays;
import java.util.List;

public class MainApplication extends Application implements ReactApplication {

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

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

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

jlbu 发表于 2016-7-15 16:00:33

耀哥帮看看

东方耀 发表于 2016-7-15 16:05:56

你拼写错了 是NativeModules而不是NatvieModules

610880568 发表于 2017-12-15 14:02:52

回复回复回复回复
页: [1]
查看完整版本: 50课错误页面