¿Hay alguna guía para implementar JavaScriptModule en react-native?

Interesados ​​en implementar llamadas nativas a llamadas javascript en react-native. Pero no encontró guías para eso.

Por favor, ayuda con algunos ejemplos de creación y registro de nativos a los módulos javascript en reaccionar nativo.


Ya se ha descubierto que el código de los módulos nativos oficiales de la documentación android tiene un método llamado createJSModules , que devuelve una lista de clases JavaScriptModule .

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

Javadoc para com.facebook.react.bridge.JavaScriptModule dice:

 /** * Interface denoting that a class is the interface to a module with the same name in JS. Calling * functions on this interface will result in corresponding methods in JS being called. * ... */ @DoNotStrip public interface JavaScriptModule { } 

Fui capaz de crear interfaz y pasar su clase a createJSModules pero no tienen idea de cómo registrar el módulo javascript adecuado de código js.

Por último, después de buscar en las fuentes de reaccionar js, he descubierto la solución, es necesario:

  1. Extender JavaScriptModule y pasarlo al método createJSModules del paquete de reacción personalizado (por ejemplo ActionsModule.java).
  2. Registre ese paquete dentro de usted reaccione el método getPackages de la actividad o piense directamente ReactInstanceManager
  3. Cree un archivo js con el mismo nombre en su código js
  4. Registrelo con BatchedBridge como se describe en el listado a continuación.
  5. Después de reactivar el contexto inicializar, puede obtenerlo y llamar a través de:

    ActionsModule jsModule = context.getJSModule (ActionsModule.class); JsModule.callAction ("saludo", "hola");

Que llamará a su método js módulo registrado asincrónicamente.


 // AppPackage.java public class AppPackage implements ReactPackage { @Override public List<NativeModule> createNativeModules(ReactApplicationContext reactContext) { return Collections.emptyList(); } @Override public List<Class<? extends JavaScriptModule>> createJSModules() { return Arrays.<Class<? extends JavaScriptModule>>asList( ActionsModule.class ); } @Override public List<ViewManager> createViewManagers(ReactApplicationContext reactContext) { return Collections.emptyList(); } } // ActionsModule.java public interface ActionsModule extends JavaScriptModule { void callAction(String type, String value); } // MyReactActivity.java public class MyReactActivity extends ReactActivity implements ReactInstanceManager.ReactInstanceEventListener { ... @Override public void onReactContextInitialized(ReactContext context) { ActionsModule jsModule = context.getJSModule(ActionsModule.class); jsModule.callAction("greet", "hello"); } ... } 

 // ActionsModule.js var ActionsModule = { callAction(type, value) { console.log("callAction => " + type + ":" + value); }, } module.exports = ActionsModule; // index.android.js import { AppRegistry } from 'react-native'; import App from './components/App'; // js module registration var BatchedBridge = require('BatchedBridge'); var ActionsModule = require('./ActionsModule'); BatchedBridge.registerCallableModule( 'ActionsModule', ActionsModule ); //~ js module registration AppRegistry.registerComponent('MyApp', () => App); 

UPD> Empujó un proyecto de demostración a github con una solución para android y ios: https://github.com/dmba/rct-native2js

No estoy seguro de que sea posible, pero ¿por qué querrías hacer esto de todos modos? Utilice NativeAppEventEmitter / DeviceEventEmitter y simplemente envíelo como un evento que escuchará en el lado de JS.

  • Cómo borrar TextInput foco en React Native? (Androide)
  • Reaccionar-nativo: app: installDebug FALLA
  • Cómo mostrar varios componentes en reactjs
  • Reaccionar la aplicación nativa de Android se ha detenido
  • ¿Flexbox en React Native usa dp o pixel?
  • ¿Cómo acceder a Actividad desde un módulo React Native Android?
  • Cómo cargar imágenes de res / drawable-folder en ReactNative-App?
  • Cómo entender el "ReactContext" en "Enviar eventos a Javascript" en React Native
  • No se puede reconocer el servidor JS
  • Cómo el estilo de la norma reaccionar-seleccionador de Android nativo?
  • ¿Cuál es la forma correcta de agregar una sola vista React Native a una aplicación Android existente?
  • FlipAndroid es un fan de Google para Android, Todo sobre Android Phones, Android Wear, Android Dev y Aplicaciones para Android Aplicaciones.