关于Navigator的NavigationBar的问题



  • 想尝试使用Navigator控件的NavigationBar,参考了官方的UIExploere和论坛的神贴:http://bbs.reactnative.cn/topic/20/新手理解navigator的教程
    写出如下代码但是并没有出现NavigationBar。。。(目前只需要显示Title即可)求大神帮忙看看问题出在哪里,跪谢!
    var React = require('react-native');
    var {
    AppRegistry,
    StyleSheet,
    Navigator,
    Text,
    } =React;

    var LogIn = require('./LogIn');
    var Register = require('./Register');

    var NavigationBarRouteMapper = {

    LeftButton: function (route, navigator, index, navState) {
        return null;
    },
    
    RightButton: function (route, navigator, index, navState) {
        return null;
    },
    
    Title: function (route, navigator, index, navState) {
        return (
            <Text style={[styles.navBarText, styles.navBarTitleText]}>
                {route.title}
            </Text>
        );
    },
    

    };

    var App = React.createClass({
    render: function () {
    return (
    <Navigator
    debugOverlay={false}
    initialRoute={{name: '登陆', component:LogIn,title:'登陆'}}
    style={styles.container}
    renderScene={(route, navigator)=>{
    let component=route.component;
    switch (component){
    case LogIn:return <LogIn {...route.params} title='登陆'name='登陆' navigator={navigator}/>;
    case Register:return <Register name='注册' navigator={navigator}/>
    }
    }
    }
    navigatorBar={
    <Navigator.NavigationBar
    routeMapper={NavigationBarRouteMapper}
    style={styles.navBar}
    />
    }
    />
    );
    }
    });

    const styles = StyleSheet.create({
    container: {
    flex: 1,
    flexDirection: 'column',
    backgroundColor: '#F5FCFF',
    },
    nav: {
    backgroundColor: '#dddddd',
    flex: 1,
    },
    navBar: {
    backgroundColor: '#337ab7',
    },
    navBarText: {
    fontSize: 16,
    marginVertical: 10,
    },
    navBarTitleText: {
    color: 'blue',
    fontWeight: '500',
    marginVertical: 9,
    },
    navBarLeftButton: {
    paddingLeft: 10,
    },
    navBarRightButton: {
    paddingRight: 10,
    },
    navBarButtonText: {
    color: 'blue',
    },
    });

    AppRegistry.registerComponent('App', () => App);



  • 同样的问题,navigationbar完全没有显示,但相同的代码在Android平台上有显示,楼主找到原因了吗?



  • 还没。。。我都怀疑官方的示例app的UIExplorer中Navigation中的Bar是NavigationIOS的了。。。。自己写了个类似功能的凑合了一下。。。回头看看Android的效果
    <View style={styles.navBar}>
    <Text style={[styles.navBarText,styles.navBarLeft]} onPress={this.onPressBack}>返回</Text>
    <Text style={[styles.navBarText,styles.navBarTitle]}>title</Text>
    <Text style={[styles.navBarText,styles.navBarRight]} onPress={this.onPressForward}>前进</Text>
    </View>

    css:
    navBar: {
    backgroundColor: 'blue',
    flexDirection:'row'
    },
    navBarText: {
    fontSize: 20,
    marginVertical: 10,
    color: 'white',
    marginTop: 30,
    },
    navBarTitle: {
    flex: 1,
    textAlign: 'center',
    },
    navBarLeft: {
    flex: 1,
    textAlign: 'left',
    marginLeft: 20,
    },
    navBarRight: {
    flex: 1,
    textAlign: 'right',
    marginRight: 20
    }



  • 楼主,搞定了吗....



  • @wuxinjie 没,自己写了个样式凑合实现了类似的效果,以后有时间再琢磨了。。把下面这个View放在页面第一个即可,页面的View的样式我参考init时生成的那个container。没写成根据屏幕适配的,我在iPad Air上用的,别的设备可能会有偏差。。。
    <View style={styles.navBar}>
    <Text style={[styles.navBarText,styles.navBarLeft]} onPress={this.onPressBack}>返回</Text>
    <Text style={[styles.navBarText,styles.navBarTitle]}>title</Text>
    <Text style={[styles.navBarText,styles.navBarRight]} onPress={this.onPressForward}>前进</Text>
    </View>

    css:
    navBar: {
    backgroundColor: 'blue',
    flexDirection:'row'
    },
    navBarText: {
    fontSize: 20,
    marginVertical: 10,
    color: 'white',
    marginTop: 30,
    },
    navBarTitle: {
    flex: 1,
    textAlign: 'center',
    },
    navBarLeft: {
    flex: 1,
    textAlign: 'left',
    marginLeft: 20,
    },
    navBarRight: {
    flex: 1,
    textAlign: 'right',
    marginRight: 20
    }



  • @atuno

    用了,可以的 , 谢谢楼主了:smiley:



  • @wuxinjie 客气,以后有时间我会尝试找出NavigationBar显示不了的原因,或者你要是提前发现原因的话恳请在这个帖子回复一下谢谢~



  • @atuno 好的,大家共勉:punch:



  • @atuno 楼主是不是属性名写错了,navigatorBar应该是navigationBar



  • @firecracker.l2
    ..........还真是。。。。。



  • @wuxinjie 脑残的错误。。。。。属性名字写错了。。。我改完之后就可以在iPad上显示了



  • @atuno 其实我开始也是写法有问题,虽然跟你错的地方不一样,有时候这种莫名其妙的问题真的需要从头检查一下。



  • @firecracker.l2 确实。。Facebook给的那个示例看着也好混乱。。Doc也没提咋用= =
    另外目前还有个疑问:如果按照示例里面那样在NavigationBarRouteMapper中把左、右两个按钮的响应函数都写死的话,如果不同页面需要跳转到不同路由的话(比如同样是右按钮,一个页面需要push,另外一个页面需要popToTop)该如何实现呢?



  • @atuno 可以比着navigationBar自定义一个View,只不过用的时候,比较不爽,每个页面都需要引入这个自定义的View



  • @XGPass 哦哦对,这样相对灵活一些倒是



  • 怎么在页面滚动时候控制隐藏和现实navigationBar



  • @zhjay999 貌似NavigatorIOS有相关属性,Navigator还真没找到。。。



  • @atuno 说:

    @firecracker.l2 确实。。Facebook给的那个示例看着也好混乱。。Doc也没提咋用= =
    另外目前还有个疑问:如果按照示例里面那样在NavigationBarRouteMapper中把左、右两个按钮的响应函数都写死的话,如果不同页面需要跳转到不同路由的话(比如同样是右按钮,一个页面需要push,另外一个页面需要popToTop)该如何实现呢?

    @atuno 最近也正想用NavigationBar,一头雾水....感觉源码中的例子咋像个半成品?!不知道你现在搞定NavigationBar了没。
    有几个疑问,Navigator只需要在rootview中设置一次,navigationBar也会只写一次,那Navigator.NavigationBar 的routeMapper也只会设置一次?是不是所有导航信息都配置在rootview中?如果是这样,不同页面怎么通过props传参呢?



  • @navie 我现在也没太弄明白该怎么改。。。目前也只是用我之前自己写的作为替代。看官方新出了个NavigationExperimental组件,不知道那个是不是官方尝试的改进。。。有时间可以琢磨琢磨



  • @atuno 说:

    NavigationExperimental

    恩一会试试NavigationExperimental。我也是自己写了个,NavigationBar我感觉也都写在rootview中也行,从右上角点击的情况不算很多,反正。。就是不咋好用/(ㄒoㄒ)/~~



  • 顶栏这东西跟 router 绑定其实不大合理,毕竟每个页面除了跳回按钮之外,其它的都不一样。所以我采取的方式是每个页面单独实现


登录后回复