RCTBridge 需要 dispatch_sync 来加载 RCTDevLoadingView.这可能会导致死锁 [英] RCTBridge required dispatch_sync to load RCTDevLoadingView. This may lead to deadlocks

问题描述

我在日志中得到了这个:

<块引用>

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 : <ActivityIndi​​cator style={{position:'absolute'}}/>}</CommentUserPicWrapper><CommentDetails borderStatus={true} marginLeft={this.props.marginLeft}><CommentUserName>{this.props.userName} 说</CommentUserName><CommentUserContent>{this.props.UserContent}</CommentUserContent><CommentUserDate><Text>{this.props.commentDate}</Text>在<Text>{this.props.commentTime}</Text>MST</CommentUserDate></评论详情><CommentReply onPress={this.replyClicked} borderStatus={true} underlayColor='transparent'><CommentReplyText>回复</CommentReplyText></评论回复></评论列表>:<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 : <ActivityIndi​​cator style={{position:'absolute'}}/>}</CommentUserPicWrapper><CommentDetails borderStatus={this.props.borderStatus} marginLeft={this.props.marginLeft}><CommentUserName>{this.props.userName} 说</CommentUserName><CommentUserContent>{this.props.UserContent}</CommentUserContent><CommentUserDate><Text>{this.props.commentDate}</Text>在<Text>{this.props.commentTime}</Text>MST</CommentUserDate></评论详情><CommentReply onPress={this.replyClicked} borderStatus={this.props.borderStatus} underlayColor='transparent'><CommentReplyText>回复</CommentReplyText></评论回复></评论列表>)

谢谢.

解决方案

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

<块引用>

#if RCT_DEV#import #万一...- (BOOL)application:(UIApplication *)application didFinishLaunchingWithOptions:(NSDictionary *)launchOptions{...RCTBridge *bridge = [[RCTBridge alloc] initWithBundleURL:jsCodeLocation模块提供者:无启动选项:启动选项];#if RCT_DEV[bridge moduleForClass:[RCTDevLoadingView 类]];#万一RCTRootView *rootView = [[RCTRootView alloc] initWithBridge:bridge模块名称:@""初始属性:无];...}

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

I get this in logs:

RCTBridge required dispatch_sync to load RCTDevLoadingView. This may lead to deadlocks

This is leading to an issue where the rendered content in React leads to alignment issues.

(See attached screenshot 1) Screenshot with Issue

This occurs randomly as all screens do not show alignment issues.

(See attached Screenshot 2) Screenshot without issue

I have used styled-components for Layout:

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

Thanks.

解决方案

I fixed it with updating AppDelegate.m as below:

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

Source: devburmistro's answer Dec 10, 2017 from: https://github.com/facebook/react-native/issues/16376

这篇关于RCTBridge 需要 dispatch_sync 来加载 RCTDevLoadingView.这可能会导致死锁的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！