关于1-9 Navigationbar的问题

来源:1-9 自定义组件NavigationBar-3

慕婉清本尊

2018-06-24


//img.mukewang.com/szimg/5b2f5f320001b05a06500497.jpg

//img.mukewang.com/szimg/5b2f5f3200014a5508860782.jpg

//img.mukewang.com/szimg/5b2f5f320001557607070548.jpg

为什么组件里面明明是取出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

0
0

React Native技术精讲与高质量上线App开发

一个真实的上线项目,一次完整的开发过程,全面掌握React Native技术

1577 学习 · 727 问题

查看课程