我在使用 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>