RCTBridge 需要 dispatch_sync 来加载 RCTDevLoadingView。这可能会导致死锁答案

【问题标题】：RCTBridge required dispatch_sync to load RCTDevLoadingView. This may lead to deadlocksRCTBridge 需要 dispatch_sync 来加载 RCTDevLoadingView。这可能会导致死锁
【发布时间】：2018-02-09 19:15:33
【问题描述】：

我在日志中得到了这个：

RCTBridge 需要 dispatch_sync 来加载 RCTDevLoadingView。这可能导致死锁

这会导致 React 中呈现的内容导致对齐问题。

（见附件截图1）Screenshot with Issue

这是随机发生的，因为所有屏幕都没有显示对齐问题。

（见附件截图2）Screenshot without issue

我在布局中使用了 styled-components：

return(
  this.props.lastComponent ?
  <CommentList marginLeft={this.props.marginLeft}>
    <CommentUserPicWrapper imageWidth={this.props.imageWidth}>
      {this.props.imageType === 'URL' ? <CommentUserPic source={{uri:this.props.uri}} imageWidth={this.props.imageWidth} onLoad={this.handleLoad}/> : <CommentUserPic source={require('../../img/defaultProfPic.png')} imageWidth={this.props.imageWidth} onLoad={this.handleLoad}/>}
      {
        this.state.loading ? null : <ActivityIndicator style={{position:'absolute'}}/>
      }
    </CommentUserPicWrapper>
    <CommentDetails borderStatus={true} marginLeft={this.props.marginLeft}>
      <CommentUserName>{this.props.userName} says</CommentUserName>
      <CommentUserContent>{this.props.UserContent}</CommentUserContent>
      <CommentUserDate><Text>{this.props.commentDate}</Text> at <Text>{this.props.commentTime}</Text>MST</CommentUserDate>
    </CommentDetails>
    <CommentReply onPress={this.replyClicked} borderStatus={true} underlayColor='transparent'>
      <CommentReplyText>Reply</CommentReplyText>
    </CommentReply>
  </CommentList>
  :
  <CommentList marginLeft={this.props.marginLeft}>
    <CommentUserPicWrapper imageWidth={this.props.imageWidth}>
      {this.props.imageType === 'URL' ? <CommentUserPic source={{uri:this.props.uri}} imageWidth={this.props.imageWidth} onLoad={this.handleLoad}/> : <CommentUserPic source={require('../../img/defaultProfPic.png')} imageWidth={this.props.imageWidth} onLoad={this.handleLoad}/>}
      {this.state.loading ? null : <ActivityIndicator style={{position:'absolute'}}/>}
    </CommentUserPicWrapper>
    <CommentDetails borderStatus={this.props.borderStatus} marginLeft={this.props.marginLeft}>
      <CommentUserName>{this.props.userName} says</CommentUserName>
      <CommentUserContent>{this.props.UserContent}</CommentUserContent>
      <CommentUserDate><Text>{this.props.commentDate}</Text> at <Text>{this.props.commentTime}</Text>MST</CommentUserDate>
    </CommentDetails>
    <CommentReply onPress={this.replyClicked} borderStatus={this.props.borderStatus} underlayColor='transparent'>
      <CommentReplyText>Reply</CommentReplyText>
    </CommentReply>
  </CommentList>
)

谢谢。

【问题讨论】：

请分享一些代码。
@DhavalJardosh 分享了我在代码中使用的渲染方法
你有想过这个吗？对我来说，将 inlineRequire 设置为 true 可以修复它，但会导致其他错误

标签： react-native

【解决方案1】：

一些答案已更正，但对于阅读的人来说不是很清楚。因为 Delegate.h 对于新手来说并不容易

位置：PRODUCT_NAME/product_name/AppDelegate.m
请仔细编辑该文件，因为如果您错了任何会导致构建失败或重新加载项目时的某个时间将导致构建失败（因此必须小心）： 在第一个文件中 #import "AppDelegate.h"

#import "AppDelegate.h"

// 添加这个

#if RCT_DEV #import #endif // ---------------

添加之前 RCTRootView *rootView =

//添加这个

#if RCT_DEV
[bridge moduleForClass:[RCTDevLoadingView 类]];

#endif //-------------------
RCTRootView *rootView = ....（您的默认代码）

【讨论】：

【解决方案2】：

我通过更新AppDelegate.m 修复了它，如下所示：

   #if RCT_DEV
   #import <React/RCTDevLoadingView.h>
   #endif
   //...

   - (BOOL)application:(UIApplication *)application didFinishLaunchingWithOptions:(NSDictionary *)launchOptions
   {
   //...
   RCTBridge *bridge = [[RCTBridge alloc] initWithBundleURL:jsCodeLocation
                 moduleProvider:nil
                  launchOptions:launchOptions];
   #if RCT_DEV
   [bridge moduleForClass:[RCTDevLoadingView class]];
   #endif

   RCTRootView *rootView = [[RCTRootView alloc] initWithBridge:bridge
                    moduleName:@"<AddYourAppNameHere>"
                 initialProperties:nil];
   //...
   }

来源： grossingdev 的回答于 2017 年 12 月 10 日来自：https://github.com/facebook/react-native/issues/16376

【讨论】：

这是否解决了警告的原因，是否为开发构建屏蔽了它？

【解决方案3】：

当使用React Native Navigation时，修改你的AppDelegate.m文件如下：

// Add this
#if RCT_DEV
#import <React/RCTDevLoadingView.h>
#endif

// ...

- (BOOL)application:(UIApplication *)application didFinishLaunchingWithOptions:(NSDictionary *)launchOptions
{
#ifdef FB_SONARKIT_ENABLED
  InitializeFlipper(application);
#endif

  [ReactNativeNavigation bootstrapWithDelegate:self launchOptions:launchOptions];

// Add this
#if RCT_DEV
  [[ReactNativeNavigation getBridge] moduleForClass:[RCTDevLoadingView class]];
#endif
  
  return YES;
}

【讨论】：

你能添加解释和/或来源吗？

【解决方案4】：

    If you just connect your app to a Firebase instance. then update your AppDelegate.m with 
   (in Objective C)  - (BOOL)application:(UIApplication *)application customDidFinishLaunchingWithOptions:(NSDictionary *)launchOptions {
     if(![FIRApp defaultApp]){
        [FIRApp configure];}}
    } 
    instead of just adding [FIRApp configure];

(in Swift) func application(_ application: UIApplication,
    didFinishLaunchingWithOptions launchOptions:
      [UIApplicationLaunchOptionsKey: Any]?) -> Bool {
    if FirebaseApp.app() == nil {
        FirebaseApp.configure()
    }
    return true
  }

【讨论】：

【解决方案5】：

快速解决方案

let bridge = RCTBridge(bundleURL: jsCodeLocation, moduleProvider: nil, launchOptions: nil)

#if RCT_DEV
bridge?.module(for: RCTDevLoadingView.self)
#endif
let rootView = RCTRootView(bridge: bridge!, moduleName: "AppMain", initialProperties: nil)

【讨论】：