ReactネイティブのネイティブUIコンポーネントの幅と高さ

Question

私はiOS上にネイティブUIコンポーネントを作成しています。サイズをコンテンツサイズに応じて拡大します。 ビューをレンダリングするには、固定幅と高さを設定する必要があるようです。どのようにそれを解決するための任意のアイデア？

// JS

import React from 'react'; 
import { View, requireNativeComponent } from 'react-native'; 

class StyledText extends React.Component { 
render() { 
    return (
     <View style={this.props.style}> 
// without the height and width the compnent won't show up 
      <StyledLabelReactBridge styledText={'some text'} style={{height: 100, width: 100, backgroundColor: 'red'}}/> 
     </View> 
    ); 
} 
} 

StyledText.propTypes = { 
styledText: React.PropTypes.string, 
style: View.propTypes.style 
}; 

const StyledLabelReactBridge = requireNativeComponent('StyledLabelReactBridge', StyledText); 

module.exports = StyledText; 

// Objective-Cの

@implementation StyledLabelReactBridgeManager 

RCT_EXPORT_MODULE() 

- (UIView *)view 
{ 
return [[NewStyledLabel alloc] init]; 
} 

RCT_CUSTOM_VIEW_PROPERTY(styledText, NSString, NewStyledLabel) 
{ 
if (![json isKindOfClass:[NSString class]]) 
    return; 

[view setStyledText:[NewStyledText textFromXHTML:json]]; 
} 

@end 

Answer 1

あなたは、コンテンツサイズの変更を受け取るためにXcodeでreactSetFrameをオーバーライドする必要があります。

#import "React/UIView+React.h" 

@implementation YourView { 
    - (void)reactSetFrame:(CGRect)frame { 
     [super reactSetFrame: frame]; 
     /* everytime content size changes, you will get its frame here. */ 
    } 
} 

Answer 2

まあ、行動などの「自動」を見つけることができませんでした、にコンポーネントを設定する方法を、これまで、：

{{ width: '100%', height: '100%}} 

が、それは十分です親に応じて拡大（および縮小）します私のユースケースのために。 'flex：1'を設定しても同じ効果はありません。