美文网首页
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