Flexbox容器不会拉伸整个屏幕

Question

我遇到了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>

Answer 1

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

Answer 2

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

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