关于1-9 Navigationbar的问题
来源:1-9 自定义组件NavigationBar-3
			慕婉清本尊
2018-06-24



为什么组件里面明明是取出props属性里面的statusBar,老师你在girl页面写在style里面也会生效呢?boy页面就是写在了statusBar属性里面传递过去的。2图就是视频girl页面,时间在2分01秒。
我写在style里面当然是不生效的,写在navBar属性是可以的。下面是navigationBar代码
import React, { Component, PropTypes } from "react";
import {
View,
Text,
Image,
StatusBar,
Platform,
StyleSheet
} from "react-native";
const NAV_BAR_HEIGHT_ANDROID = 50;
const NAV_BAR_HEIGHT_IOS = 44;
const STATUS_BAR_HEIGHT = 20;
const statusBarShape = {
backgroundColor: PropTypes.string,
barStyle: PropTypes.oneOf(['default', 'light-content', 'dark-content']),
hidden: PropTypes.bool
}
export default class NavigationBar extends Component {
static propTypes = {
style: View.propTypes.style,
title: PropTypes.string,
titleView: PropTypes.element,
hide: PropTypes.bool,
leftButton: PropTypes.element,
rightButton: PropTypes.element,
statusBar: PropTypes.shape()
}
static defaultProps = {
statusBar: {
backgroundColor:'#EE6363',
barStyle: 'light-content',
hidden: false
}
}
constructor(props) {
super(props)
this.state = {
title: '',
hide: false,
}
}
render() {
let status = <View style={styles.statusBar}><StatusBar {...this.props.statusBar} /></View>
let titleView = this.props.titleView ? this.props.titleView : <Text style={styles.title}>{this.props.title}</Text>;
let content = <View style={styles.navBar}>
{this.props.leftButton}
<View style={styles.titleViewContainer}>
{titleView}
</View>
{this.props.rightButton}
</View>
return (
<View style={[styles.container,this.props.style]}>
{status}
{content}
</View>
)
}
}
const styles = StyleSheet.create({
container: {
backgroundColor: 'gray',
},
navBar: {
justifyContent: 'space-between',
alignItems: 'center',
backgroundColor: '#EE6363',
height: Platform.OS === 'ios' ? NAV_BAR_HEIGHT_IOS : NAV_BAR_HEIGHT_ANDROID,
flexDirection: 'row'
},
titleViewContainer: {
justifyContent: 'center',
alignItems: 'center',
position: 'absolute',
left: 40,
right: 40,
top: 0,
bottom: 0,
},
title: {
fontSize: 20,
color: '#ffffff'
},
statusBar: {
height: Platform.OS === 'ios' ? STATUS_BAR_HEIGHT : 0
}
})写回答
	1回答
- 
				
						CrazyCodeBoy
2018-06-24
Girl页面没有设置NavigationBar的statusBar属性,所以statusBar是透明的,但Girl页面设置了NavigationBar的style:backgroundColor:#FFC1C1,所以你会看到Girl页面的NavigationBar的颜色为#FFC1C1
00 
相似问题