React Native - 하위보기를 래핑하는 부모보기

Question

텍스트가있는보기가 있습니다. 구성 요소는 다음과 같습니다 :이 구성 요소가 사용됩니다 때

MyComponent =() => { 
    return (
     <View style={styles.viewStyle}> 
      <Text style={styles.textStyle}>My Text</Text> 
     </View> 
    ); 
} 

const styles = { 
    viewStyle: { 
     backgroundColor: '#006699', 
     height: 40, 
     justifyContent: 'center', 
     alignItems: 'center', 
    }, 
    textStyle: { 
     color: '#000000', 
     fontSize: 16, 
    } 
} 

, 내보기 그냥 내 텍스트를 래핑하도록 사용자 정의 폭을 갖고 싶어. 여기에 시각적 단서는 없습니다 :

Answer 1

여기와는 아무 상관이 반응 구성 요소 ..

const styles = { 
    .... 
    textStyle: { 
     color: '#000000', 
     fontSize: 16, 
     float:left, 
     padding:5px 
    } 
} 

Answer 2

그것은 Layout with Flexbox의 원래 디자인에 관하여이다.

당신은 그것으로 작동 중 (자동 <Text /> 폭과 관련 스트레칭 있도록)는 부모 뷰의에 flexDirection: 'row'를 추가

<View style={{flex: 1, flexDirection: 'row'}}> 
    <View style={styles.viewStyle}> 
    <Text style={styles.textStyle}>My Text</Text> 
    </View>     
</View> 

를하거나 직접에 폭을 제공 할 수 있습니다. 옵션 1의

<View style=[{styles.viewStyle}, {width: 50}]> 
    <Text style={styles.textStyle}>My Text</Text> 
</View>     

결과 :