React native必需的未知模块自定义本机组件

Question

我正在尝试为ReactNative实现自定义本机组件。根据文档，我创建了如下所有的组件。但仍然收到错误要求未知模块“MyCustomToast”。请帮我解决这个问题。

SampleToast.java:-

public class SampleToast extends ReactContextBaseJavaModule { 


public SampleToast(ReactApplicationContext reactContext) { 
    super(reactContext); 
} 

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

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

}

MakeReactPackage.java:-

public class MakeReactPackage implements ReactPackage { 
@Override 
public List<NativeModule> createNativeModules(ReactApplicationContext reactContext) { 

    List<NativeModule> modules = new ArrayList<>(); 
    modules.add(new SampleToast(reactContext)); 
    return modules; 

} 

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

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

}

MainAct ivity.java:-

public class MainActivity extends Activity implements DefaultHardwareBackBtnHandler { 

private ReactInstanceManager mReactInstanceManager; 
private ReactRootView mReactRootView; 

@Override 
protected void onCreate(Bundle savedInstanceState) { 
    super.onCreate(savedInstanceState); 
    mReactRootView = new ReactRootView(this); 

    mReactInstanceManager = ReactInstanceManager.builder() 
      .setApplication(getApplication()) 
      .setBundleAssetName("index.android.bundle") 
      .setJSMainModuleName("index.android") 
      .addPackage(new MainReactPackage()) 
      .addPackage(new MakeReactPackage()) 
      .setUseDeveloperSupport(BuildConfig.DEBUG) 
      .setInitialLifecycleState(LifecycleState.RESUMED) 
      .build(); 

    mReactRootView.startReactApplication(mReactInstanceManager, "HelloWorldBha", null); 

    setContentView(mReactRootView); 
} 

@Override 
public boolean onKeyUp(int keyCode, KeyEvent event) { 
    if (keyCode == KeyEvent.KEYCODE_MENU && mReactInstanceManager != null) { 
     mReactInstanceManager.showDevOptionsDialog(); 
     return true; 
    } 
    return super.onKeyUp(keyCode, event); 
} 

@Override 
public void onBackPressed() { 
    if (mReactInstanceManager != null) { 
     mReactInstanceManager.onBackPressed(); 
    } else { 
     super.onBackPressed(); 
    } 
} 

@Override 
public void invokeDefaultOnBackPressed() { 
    super.onBackPressed(); 
} 

@Override 
protected void onPause() { 
    super.onPause(); 

    if (mReactInstanceManager != null) { 
     mReactInstanceManager.onPause(); 
    } 
} 

@Override 
protected void onResume() { 
    super.onResume(); 

    if (mReactInstanceManager != null) { 
     mReactInstanceManager.onResume(this); 
    } 
}} 

而且在JS

反应-native.js： -

MyCustomToast:require('MyCustomToast'), 

SampleToast.js： -

'use strict'; 

/** 
* This exposes the native ToastAndroid module as a JS module. This has a function 'show' 
* which takes the following parameters: 
* 
* 1. String message: A string with the text to toast 
* 2. int duration: The duration of the toast. May be ToastAndroid.SHORT or ToastAndroid.LONG 
*/ 
var { NativeModules } = require('react-native'); 
module.exports = NativeModules.MyCustomToast; 

Index.android.js： -

/** 
* Sample React Native App 
* https://github.com/facebook/react-native 
*/ 
'use strict'; 

var React = require('react-native'); 
var toastMessage = require('SampleToast') 
var { 
    AppRegistry, 
    StyleSheet, 
    Text, 
    View, 
    NativeModules 
    } = React; 




var HelloWorldBha = React.createClass({ 
    render: function() { 
     return (
      <View style={styles.container}> 
       <Text style={styles.welcome}> 
        Welcome to React Native! 
       </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> 


       toastMessage.show('Bharath Kumar'); 

      </View> 
     ); 
    } 
}); 

var 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('HelloWorldBha',() => HelloWorldBha); 

Answer 1

在SampleToast.js使用providesModule注解。所以SampleToast.js变为：

/** 
* @providesModule SampleToast 
*/ 

'use strict'; 

/** 
    * This exposes the native ToastAndroid module as a JS module. This has a function 'show' 
    * which takes the following parameters: 
    * 
    * 1. String message: A string with the text to toast 
    * 2. int duration: The duration of the toast. May be ToastAndroid.SHORT or ToastAndroid.LONG 
    */ 
var { NativeModules } = require('react-native'); 
module.exports = NativeModules.MyCustomToast; 

另外，当您使用需要Index.android.js（“SampleToast”），那么你就需要给的相对路径。所以，如果SampleToast.js和Index.android.js住在同一个目录中，您将需要

var toastMessage = require('./SampleToast'); 

就个人而言，我更喜欢第一个选项。