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

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

Answer 2

在导入AppDelegate.h之后添加这一行

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

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

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

现在重建应用程序。错误应该消失了。

如需进一步参考，请访问这里。

Answer 3

有些答案是正确的，但对某些人来说并不清楚。因为代表对新手来说不容易

1. 地点:产品名称/产品名称/AppDelegate.m
2. 仔细编辑该文件，因为如果您错误了任何会生成失败的内容，或者当您重新加载项目时会出现构建失败(所以必须小心)：在#导入"AppDelegate.h“之后的第一个文件中

#导入"AppDelegate.h“ //如果RCT_DEV #导入 #endif /

在 RCTRootView *rootView =之前添加

//添加此#if RCT_DEV [桥模块类:RCTDevLoadingView类]；#endif //？ RCTRootView *rootView =。(默认代码)