React Native模块中的依赖注入

时间:2016-05-10 15:03:23

标签: ios dependency-injection react-native

我们正在逐步将我的应用程序转换为React Native。 我一直在iOS上的React Native中遇到依赖注入问题。

我的应用程序中有一些服务我想在本机模块中使用。目前,它们是通过台风注入的,一切正常。

但是,本机本身会将任何本机模块初始化并维护为单例。这使我无法让Typhoon初始化它们,因此我无法将依赖注入其中。

可以做些什么?自己创建RCTBridge是一个选项,但感觉非常低级,并且仍然需要弄清楚如何将它注入到UIView中。

2 个答案:

答案 0 :(得分:14)

我不确定为什么你的问题没有获得更多的选票;我自己也在努力回答同样的问题,并认为我应该继续回答我的第一个StackOverflow问题!

挖掘RCTBridge class提供了答案。您需要做的是使用实现RCTBridgeProtocol的类的实例手动初始化RCTBridge(重要的是'extraModulesForBridge'方法;如果您愿意,甚至可以在View Controller中实现此协议。

<div id="Parent">
  <h6>Help Me</h6>
  <div id="Child">
    <p>
      dsadasdasdasdadsadasdasdasdadsadasdasdasdadsadasdasdasdadsadasdasdasdadsadasdasdasdadsadasdasdasda
      <br>dsadasdasdasdadsadasdasdasdadsadasdasdasdadsadasdasdasdadsadasdasdasdadsadasdasdasdadsadasdasdasda
      <br>dsadasdasdasdadsadasdasdasdadsadasdasdasdadsadasdasdasdadsadasdasdasdadsadasdasdasdadsadasdasdasda
      <br>dsadasdasdasdadsadasdasdasdadsadasdasdasdadsadasdasdasdadsadasdasdasdadsadasdasdasdadsadasdasdasda
      <br>dsadasdasdasdadsadasdasdasdadsadasdasdasdadsadasdasdasdadsadasdasdasdadsadasdasdasdadsadasdasdasda
      <br>dsadasdasdasdadsadasdasdasdadsadasdasdasdadsadasdasdasdadsadasdasdasdadsadasdasdasdadsadasdasdasda
      <br>dsadasdasdasdadsadasdasdasdadsadasdasdasdadsadasdasdasdadsadasdasdasdadsadasdasdasdadsadasdasdasda
      <br>dsadasdasdasdadsadasdasdasdadsadasdasdasdadsadasdasdasdadsadasdasdasdadsadasdasdasdadsadasdasdasda
      <br>dsadasdasdasdadsadasdasdasdadsadasdasdasdadsadasdasdasdadsadasdasdasdadsadasdasdasdadsadasdasdasda
      <br>dsadasdasdasdadsadasdasdasdadsadasdasdasdadsadasdasdasdadsadasdasdasdadsadasdasdasdadsadasdasdasda
      <br>dsadasdasdasdadsadasdasdasdadsadasdasdasdadsadasdasdasdadsadasdasdasdadsadasdasdasdadsadasdasdasda
      <br>dsadasdasdasdadsadasdasdasdadsadasdasdasdadsadasdasdasdadsadasdasdasdadsadasdasdasdadsadasdasdasda
      <br>dsadasdasdasdadsadasdasdasdadsadasdasdasdadsadasdasdasdadsadasdasdasdadsadasdasdasdadsadasdasdasda
      <br>dsadasdasdasdadsadasdasdasdadsadasdasdasdadsadasdasdasdadsadasdasdasdadsadasdasdasdadsadasdasdasda
      <br>dsadasdasdasdadsadasdasdasdadsadasdasdasdadsadasdasdasdadsadasdasdasdadsadasdasdasdadsadasdasdasda
      <br>
    </p>
  </div>

</div>

编辑:我将此添加到React-native文档中。 https://facebook.github.io/react-native/docs/native-modules-ios.html#dependency-injection

答案 1 :(得分:3)

上面的代码工作得很好。这是Swift 4版本的代码。

<a id="coupon" class="" href="javascript:void(0);" id="coupon_id">coupon</a>


$("document").ready(function()
{
    $("#coupon").click(function ()
    {
        sendS();
    });

});


function sendS()
{
    var couponID="abc123";//anythg u like
    var userID="hahaha@mail.com";
    $.ajax(
    {
        type:"POST",
        dataType:"json",
        url:"php.php",
        data:{cID:couponID,uID:userID},

        success: function(data)
        {
            alert(data)
        },
        error: function () 
        {
            alert("Error!");
        }
    }); 
}

初始化网桥时,请传递moduleInitialiser:

@objc(RNModuleInitialiser)
final class RNModuleInitialiser: NSObject {

    //Inject your dependencies here
    init() {

    }

}

extension RNModuleInitialiser: RCTBridgeDelegate {

    func sourceURL(for bridge: RCTBridge!) -> URL! {
        return URL(string: "http://localhost:8081/index.ios.bundle?platform=ios")!
    }

    func extraModules(for bridge: RCTBridge!) -> [RCTBridgeModule]! {

        var extraModules = [RCTBridgeModule]()

        //Initialise the modules here using the dependencies injected above

        return extraModules
    }

}