关于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
相似问题