Flexbox 容器没有拉伸整个屏幕答案

【问题标题】：Flexbox container not stretching entire screenFlexbox 容器没有拉伸整个屏幕
【发布时间】：2018-03-14 14:26:43
【问题描述】：

我在使用 flexbox 时遇到了问题。我想在我的标题顶部有一个不透明的栏。但我似乎无法让它发挥作用。见图片：

我不知道如何让它拉伸整个屏幕宽度。

这是我的整个屏幕文件：

render() {
    const ds = new ListView.DataSource({ rowHasChanged: (r1, r2) => r1 !== r2 });
    return (
        <Container>
            <Header style={{ height: 100 }}>
                <LinearGradient
                    colors={['#B31F64', '#4B245F']}
                    start={[1, 1]}
                    end={[0, 1]}
                    style={{
                        position: 'absolute',
                        left: 0,
                        right: 0,
                        top: 0,
                        height: 100,
                    }} />
                <View style={{ flex: 1, flexDirection: 'column' }}>
                    <View style={{ backgroundColor: 'rgba(255, 255, 255, 0.1)', flexDirection: 'row' }}>
                        <View style={{ marginTop: 0, flex: 1 }}>
                            <Button
                                transparent
                                onPress={() => this.props.navigation.navigate('DrawerOpen')}
                            >
                                <Icon name="menu" style={{ color: 'white', height: 30, width: 30 }} />
                            </Button>
                        </View>


                        <Image
                            style={{
                                flex: 5,
                                alignSelf: 'center',
                                justifyContent: 'center',
                                marginBottom: 10,
                                height: 30,
                            }}
                            source={logo}
                            resizeMode="contain"
                        />
                        <View style={{ flex: 1 }}>
                            <Icon name="notifications" style={{ color: 'white' }} />
                        </View>
                    </View>
                    <View style={{ flex: 1 }}>
                        {this.renderNextShift()}
                    </View>
                </View>
            </Header>

【问题讨论】：

给它width: 100%
那行不通
尝试将alignItems: 'stretch' 添加到父组件的style 属性中。
我设法通过将 Header 组件从 native-base 更改为 View 标记来使其工作

标签： react-native native-base react-native-flexbox

【解决方案1】：

试试width:Dimension.get('window').width

【讨论】：

【解决方案2】：

<View style={{ backgroundColor: 'rgba(255, 255, 255, 0.1)', flexDirection: 'row', flex:1 }}>

检查 OpaqueBar 组件上的 flex:1 值。

【讨论】：