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

Question

我在日志中得到这个:

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

这导致了React中呈现的内容导致对齐问题的问题.

(参见附件截图1)截图与问题

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

(见附件截图2)截图没有问题

我使用样式组件进行布局:

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>
)

谢谢.

Answer 1

我用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];
  ...
}

资料来源: devburmistro的答案2017年12月10日来自:https://github.com/facebook/react-native/issues/16376

Answer 2

导入 AppDelegate.h 后立即添加此行

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

然后在 RCTRootView 之前的 AppDelegate 实现中添加以下行：

#if RCT_DEV
[bridge moduleForClass:[RCTDevLoadingView class]];
#endif

立即重建应用程序。错误应该消失了。

如需进一步参考，请访问此处。

Answer 3

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

1. 位置： PRODUCT_NAME/product_name/AppDelegate.m
2. 仔细编辑该文件，因为如果您犯了任何错误，将会构建失败，或者有时重新加载项目时将会构建失败（因此必须小心）： 在#import“AppDelegate.h”之后的第一个文件中

#导入“AppDelegate.h”

// 添加这个

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

在RCTRootView *rootView =之前添加

// 添加这个

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

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