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,
    }
}

当使用此组件时，我希望我的View具有自定义宽度，以便它只包装我的文本。这是视觉线索：

Answer 1

这是关于Layout with Flexbox的原始设计。

您可以通过向其父视图添加flexDirection: 'row'来使其工作（因此它会自动拉伸与<Text />宽度相关），

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

或直接给它宽度。

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

选项1的结果：

Answer 2

这里与反应组件无关。

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