React Native - 父视图包装子视图

【问题标题】：React Native - Parent View to wrap the child viewReact Native - 父视图包装子视图
【发布时间】：2017-12-29 21:50:29
【问题描述】：

我有一个视图，里面有文本。该组件如下所示：

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

当这个组件被使用时，我希望我的视图有一个自定义宽度，这样它就可以包裹我的文本。这是视觉线索：

【问题讨论】：

标签： javascript reactjs react-native flexbox

【解决方案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 的结果：

【讨论】：