React Native模块中的依赖注入

Question

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

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

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

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

Answer 1

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

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

// Initialise a class that implements RCTBridgeDelegate
// Be warned, RCTBridge won't store a strong reference to your delegate.
// You should there store this delegate as a property of your initialising class, or implement the protocol in the View Controller itself. 
id<RCTBridgeDelegate> moduleInitialiser = [[classThatImplementsRCTBridgeDelegate alloc] init];

// Create a RCTBridge instance 
// (you may store this in a static context if you wish to use with other RCTViews you might initialise.  
RCTBridge *bridge = [[RCTBridge alloc] initWithDelegate:moduleInitialiser launchOptions:nil];

// Initialise an RCTRootView
RCTRootView *rootView = [[RCTRootView alloc]
                     initWithBridge:bridge
                         moduleName:kModuleName
                  initialProperties:nil];

// Note that your class that implements RCTBridgeDelegate SHOULD implement the following methods and it might look something like this.

// This will return the location of our Bundle
- (NSURL *)sourceURLForBridge:(RCTBridge *)bridge
{
    return [NSURL URLWithString:@"http://localhost:8081/index.ios.bundle?platform=ios"];
}

// Importantly, this is the method we need to implement to answer this question
// We must return an array of initialised Modules
// Be warned, I am writing this off of the top of my head, so excuse any syntax errors there might be!
- (NSArray *)extraModulesForBridge:(RCTBridge *)bridge
{
   return @[[OurNativeModule alloc] initWithCustomInitialiser:customDependency]];
}

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

Answer 2

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

@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
    }

}

初始化桥时，传递moduleInitialiser：

//Make sure to hold the strong reference to the moduleInitaliser

self.moduleInitialiser = RNModuleInitialiser()
self.bridge = RCTBridge(delegate: self.moduleInitialiser, launchOptions: nil)