反应本机自定义文本本机ui

时间:2019-01-16 07:46:57

标签: ios objective-c react-native

我想创建一个文本本机ui组件,以对其进行自定义(样式,字体,动作等)。 我在通知框架已渲染的js视图时遇到问题。

TextViewManager.h

#import <Foundation/Foundation.h>

#import <React/RCTUIManager.h>
#import <React/RCTUIManagerUtils.h>

#import "RNTextView.h"

@interface TextViewManager : RCTViewManager

@end

TextViewManager.m

#import "TextViewManager.h"

@implementation TextViewManager

@synthesize bridge = _bridge;

RCT_EXPORT_MODULE(TextView)

RCT_EXPORT_VIEW_PROPERTY(text, NSString)

- (UIView *)view
{
  return [[RNTextView alloc] init];
}
@end

RNTextView.h

#import <UIKit/UIKit.h>
#import <React/RCTUIManager.h>
#import <React/RCTView.h>

@interface RNTextView : RCTView

@property (nonatomic, copy) NSString* text;

@end

RNTextView.m

#import "RNTextView.h"

@implementation RNTextView
{
  UITextView *_textView;
  CGRect _reactViewFrame;
}

- (instancetype)initWithFrame:(CGRect)frame
{
  NSLog(@"RNTextView:initWithFrame: %@", NSStringFromCGRect(frame));
  self = [super initWithFrame:frame];
  [self setAutoresizesSubviews:YES];

  _textView = [[UITextView alloc] initWithFrame:self.bounds];
  [self addSubview:_textView];
  return self;
}

- (void)reactSetFrame:(CGRect)frame {

  NSLog(@"RNTextView:reactSetFrame: %@", NSStringFromCGRect(frame));
  _reactViewFrame = frame;

  _reactViewFrame.size.height = 0.0f;

  _textView.frame = _reactViewFrame;
  [_textView sizeToFit];

  _reactViewFrame.size.height = _textView.frame.size.height;
  self.frame = _reactViewFrame;

  NSLog(@"RNTextView:reactSetFrame_2: %@ %@", NSStringFromCGRect(_reactViewFrame), NSStringFromCGRect(self.frame));

  [self setNeedsDisplay];
  [super reactSetFrame:frame];
}

#pragma mark - PropTypes
- (void)setText:(NSString *)text
{
  NSLog(@"RNTextView:setText: %@", NSStringFromCGRect(self.frame));
  _textView.text = text;
}

@end

setText方法中,视图框架返回{{0, 0}, {0, 0}}。因此,我仅在此处设置_textView的文本。我在reactSetFrame方法中获得了框架的宽度,所以我在这里更新了textview的视图。

问题在于,js组件中的视图不会更新确实更新过的框架。

看起来像这样: enter image description here

TextViewScrollView中的一项。

<ScrollView>
...
    <TextView style={{width: '100%', ...}} text={...}/>
</ScrollView>

有建议解决这个问题吗?谢谢您的时间。

0 个答案:

没有答案