我这么写的，进入欢迎页之后状态没有了 可能是被覆盖了 然后整个navigationBar的上面有一段空白，弄了几天了实在没发现空白是怎么来的 我就算把navigationBar删了 还是有空白

下面老师的欢迎页和我的

navigationBar代码

import React from 'react';

import { View, Text, Image, StyleSheet, Platform, StatusBar } from 'react-native';

import PropTypes from 'prop-types';

const NAV_BAR_HEIGHT_ANDROID = 50;

const NAV_BAR_HEIGTH_IOS = 44;

const STATUS_BAR_HEIGHT = 20;

const StatusBarShap = {

  backgroundColor: PropTypes.string,

  barStyle: PropTypes.oneOf(['default', 'light-content', 'dark-content']),

  hidden: PropTypes.bool

}

export default class NavigationBar extends React.Component {

  static propTypes = {

    style: View.propTypes.style,

    title: PropTypes.string,

    titleView: PropTypes.element,

    hide: PropTypes.bool,

    leftButton: PropTypes.element,

    righButton: PropTypes.element,

    statusBar: PropTypes.shape(StatusBarShap)

  }

  static defaultProps = {// 如果传入的statusBar里没有barStyle和hidden就指定默认值

    statusBar: {

      barStyle: 'light-content',

      hidden: false

    }

  }

  constructor(props) {

    super(props);

    this.state = {

      title: '',

      hide: false

    }

  }

  getButtonElement(element) {

      return (

          <View style={styles.navBarButton}>

              {element? element : null}

          </View>

      );

  }

  render() {

    // 状态栏

    let statusBar = !this.props.statusBar.hidden ?

            <View style={styles.statusBar}>

                <StatusBar {...this.props.statusBar} />

            </View>: null;

    // navigationBar

    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={[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: 'gray',

  },

  navBar: {

    flexDirection: 'row',

    justifyContent: 'space-between',

    alignItems: 'center',

    height: Platform.OS === 'ios' ? NAV_BAR_HEIGTH_IOS : NAV_BAR_HEIGHT_ANDROID,

  },

  titleViewContainer: {

    justifyContent: 'center',

    alignItems: 'center',

    position: 'absolute',

    left: 40,

    right: 40,

    top: 0,

    bottom: 0

  },

  title: {

    fontSize: 20,

    color: '#fff'

  },

  navBarButton: {

    alignItems: 'center',

  },

  statusBar: {

    backgroundColor: 'gray',

    marginTop: 0,

    height: Platform.OS === 'ios' ? STATUS_BAR_HEIGHT : 0

  }

})

欢迎页的代码

import React from 'react';

import { View, Text, TouchableOpacity, Image, StyleSheet } from 'react-native';

import HomePage from './HomePage';

import NavigationBar from '../commons/navigationBar';

export default class Welcome extends React.Component {

  constructor(props) {

    super(props)

  }

  componentDidMount() {

    this.timer = setTimeout(() => {

      console.log(this.props.navigation)

    },2000)

  }

  componentWillUnmount() {

    this.timer && clearTimeout(this.timer)

  }

  render() {

    return (

      <View style={styles.container}>

        <NavigationBar

          title={'欢迎'}

        />

        <Text>欢迎页</Text>

      </View>

    )

  }

}

const styles = StyleSheet.create({

  container: {

    flex: 1,

    backgroundColor: 'pink',

  }

})