请稍等 ...
×

采纳答案成功！

向帮助你的同学说点啥吧！感谢那些助人为乐的人

barStyle默认属性不执行

跟老师视频的代码做了比较是一样的,但是与老师视频讲解不同的是必须在调用NavigationBar组件的属性中去主动设置barStyle: 'light-content',才会出现效果,也就是说在defaultProps属性中设置的默认属性没有生效,请问为什么?下面是NavigationBar的代码:

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 propsTypes = {
       style: View.propTypes.style,
       title: PropTypes.string,
       titleView: PropTypes.element,
       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,
   }
});
V丶x 2018-12-04 18:26:24
源自：1-9  自定义组件NavigationBar-3
1511
收起

正在回答 回答被采纳积分+3

3回答

CrazyCodeBoy 2018-12-05 09:47:53

可参考：

/**
 * 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 回复 有任何疑惑可以回复我~
收起回答
  • 提问者 V丶x #1 
    老师我这里是学到1.9节视频那里出的问题.. 调用的地方不去引用statusBar属性来设置样式的话, defaultProps就能够实现默认内容, 但是要引用statusBar方法的话,defaultProps就不会执行了,这是咋回事...?而且会出现警告,(无论能不能实现defaultProps的默认属性) 警告截图如下
    回复 有任何疑惑可以回复我~ 2018-12-06 08:46:30
取消 回复
提问者 V丶x 2018-12-04 19:59:38

https://img1.sycdn.imooc.com//szimg/5c066b6000012c1710600426.jpg

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

https://img1.sycdn.imooc.com//szimg/5c066c1a0001648907940238.jpg

https://img1.sycdn.imooc.com//szimg/5c066c270001bdd708941738.jpg

0 回复 有任何疑惑可以回复我~
收起回答
取消 回复
提问者 V丶x 2018-12-04 18:45:42

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 回复 有任何疑惑可以回复我~
收起回答
取消 回复

相似问题

在默认里面设置了 barStyle:
1202 0 2
NavigationBar的属性约束和默认属性
708 0 1
get_attribute默认属性失败
700 0 3
类中的成员属性初始化默认值
310 0 1
这里CheckBox的drawablePadding和padding属性默认不是0吗
474 0 1

登录后可查看更多问答，登录/注册

问题已解决，确定采纳
还有疑问，暂不采纳
React Native技术精讲与高质量上线App开发
  • 参与学习       1577    人
  • 解答问题       727    个

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

了解课程

本课精华内容

问答

Navigator使用报错evaluating '_react3.default.PropTypes.shape'

4.6k 12

React Native JS 调试打不了断点

1.1k 9

倒入Navigator出错

1.1k 9

老师求帮助，ScrollableTabView Listener is not supported for native driven events

1.5k 8

react-native-scrollable-tab-view，我断点的时候已经拿到数据了，但是popular模块下面的ListView总是显示空白？

1.3k 7

查看更多本课问答
意见反馈 帮助中心 APP下载
官方微信