3回答

CrazyCodeBoy

2018-12-05

可参考：

/**
 * NavigationBar
 * @flow
 */
import React, {Component} from 'react';

import {
    StyleSheet,
    Platform,
    StatusBar,
    Text,
    View,
    DeviceInfo,
    ViewPropTypes
} from 'react-native'
import {PropTypes} from 'prop-types';

const NAV_BAR_HEIGHT_IOS = 44;
const NAV_BAR_HEIGHT_ANDROID = 50;
const STATUS_BAR_HEIGHT = DeviceInfo.isIPhoneX_deprecated ? 0 : 20;
const StatusBarShape = {
    barStyle: PropTypes.oneOf(['light-content', 'default',]),
    hidden: PropTypes.bool,
    backgroundColor: PropTypes.string,
};
export default class NavigationBar extends Component {
    static propTypes = {
        style: ViewPropTypes.style,
        title: PropTypes.string,
        titleView: PropTypes.element,
        titleLayoutStyle: ViewPropTypes.style,
        hide: PropTypes.bool,
        statusBar: PropTypes.shape(StatusBarShape),
        rightButton: PropTypes.element,
        leftButton: PropTypes.element,

    }
    static defaultProps = {
        statusBar: {
            barStyle: 'light-content',
            hidden: false,
        },
    }

    constructor(props) {
        super(props);
        this.state = {
            title: '',
            hide: false
        };
    }

    getButtonElement(data) {
        return (
            <View style={styles.navBarButton}>
                {data ? data : null}
            </View>
        );
    }

    render() {
        let statusBar = !this.props.statusBar.hidden ?
            <View style={styles.statusBar}>
                <StatusBar {...this.props.statusBar} />
            </View> : null;

        let titleView = this.props.titleView ? this.props.titleView :
            <Text ellipsizeMode="head" numberOfLines={1} style={styles.title}>{this.props.title}</Text>;

        let content = this.props.hide ? null :
            <View style={styles.navBar}>
                {this.getButtonElement(this.props.leftButton)}
                <View style={[styles.navBarTitleContainer, this.props.titleLayoutStyle]}>
                    {titleView}
                </View>
                {this.getButtonElement(this.props.rightButton)}
            </View>;
        return (
            <View style={[styles.container, this.props.style]}>
                {statusBar}
                {content}
            </View>
        )
    }
}

const styles = StyleSheet.create({
    container: {
        backgroundColor: '#2196F3',
    },
    navBar: {
        flexDirection: 'row',
        alignItems: 'center',
        justifyContent: 'space-between',
        height: Platform.OS === 'ios' ? NAV_BAR_HEIGHT_IOS : NAV_BAR_HEIGHT_ANDROID,
    },
    navBarTitleContainer: {
        alignItems: 'center',
        justifyContent: 'center',
        position: 'absolute',
        left: 40,
        top: 0,
        right: 40,
        bottom: 0,
    },
    title: {
        fontSize: 20,
        color: '#FFFFFF',
    },
    navBarButton: {
        alignItems: 'center',
    },
    statusBar: {
        height: Platform.OS === 'ios' ? STATUS_BAR_HEIGHT : 0,

    },
})

0

1

V丶x

老师我这里是学到1.9节视频那里出的问题.. 调用的地方不去引用statusBar属性来设置样式的话, defaultProps就能够实现默认内容, 但是要引用statusBar方法的话,defaultProps就不会执行了,这是咋回事...?而且会出现警告,(无论能不能实现defaultProps的默认属性) 警告截图如下

2018-12-06

共1条回复

V丶x

提问者

2018-12-04

啊老师我知道了, 在调用的地方不去引用statusBar属性来设置样式, defaultProps就能够实现内容, 但是要引用statusBar方法的话(把注释掉的地方解开),defaultProps就不会执行了,这是咋回事...?而且会出现警告,(无论能不能实现defaultProps的默认属性) ,警告内容为: 

0

0

V丶x

提问者

2018-12-04

import React, {Component, PropTypes} from 'react';
import {
   View,
   Text,
   Image,
   Platform,
   StyleSheet,
   StatusBar
} 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,
       titleLayoutStyle:View.propTypes.style,
       hide: PropTypes.bool,
       leftButton: PropTypes.element,
       rightButton: PropTypes.element,
       statusBar: PropTypes.shape(StatusBarShape)
   };

   static defaultProps = {
       statusBar: {
           barStyle: 'light-content',
           hidden: false
       }
   };

   constructor(props) {
       super(props);
       this.state = {
           title: '',
           hide: false
       }
   }

   render() {
       let status = <View style={[styles.statusBar, this.props.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',
       height: Platform.OS === 'ios' ? NAV_BAR_HEIGHT_IOS : NAV_BAR_HEIGHT_ANDROID,
       backgroundColor: 'red',
       flexDirection: 'row'
   },
   titleViewContainer: {
       justifyContent: 'center',
       alignItems: 'center',
       position: 'absolute',
       left: 40,
       right: 40,
       top: 0,
       bottom: 0
   },
   title: {
       fontSize:20,
       color:'white'
   },
   statusBar: {
       height:Platform.OS==='ios'?STATUS_BAR_HEIGHT:0,
   }
});

并且还报了很多的warning: invalid props.style.key 'barStyle'

0

0