美文网首页
react native Navigator.Navigatio

react native Navigator.Navigatio

作者: proud2008 | 来源:发表于2016-12-13 17:01 被阅读223次

相关js源码地址

node_modules\react-native\Libraries\CustomComponents\Navigator\
NavigatorNavigationBar.js
Paste_Image.png

有个navigationStyles属性 跟踪在android下指向的是

node_modules\react-native\Libraries\CustomComponents\Navigator\NavigatorNavigationBarStylesAndroid.js

修改如下


Paste_Image.png
var BASE_STYLES = {
  Title: {
    position: 'absolute',
    bottom: 0,
    left: 0,
    right: 0,
    /*alignItems: 'flex-center',*/
    alignItems: 'center',
    height: NAV_ELEMENT_HEIGHT,
    backgroundColor: '#ff004e',
    /*marginLeft: TITLE_LEFT,*/
    marginLeft: 0,
    paddingHorizontal : TITLE_LEFT,

  },

使用示例

render() {
        return (
            <Navigator
            initialRoute={{name: 'ScrollViewDemo', component: ScrollViewDemo}}
            renderScene={this.renderScene}
            navigationBar={<Navigator.NavigationBar
                style={styles.navContainerRoot}
                routeMapper={this.NavigationBarRouteMapper()
                }
        />}
            ></Navigator>
        );
    }

    ...

    const styles = StyleSheet.create({
    /*高度不要设置 Navigator\NavigatorNavigationBar.js 中的navigationStyles NavigatorNavigationBarStylesAndroid已默认定义了,56*/
        navContainerRoot: {
            backgroundColor: '#81c04d',
            alignItems: 'center',
            justifyContent: 'center',
        },


相关文章

网友评论

      本文标题:react native Navigator.Navigatio

      本文链接:https://www.haomeiwen.com/subject/borbmttx.html