React-native使用Navigator和ToolBar关联

1 篇文章 0 订阅
1 篇文章 0 订阅

解决方法:将ToolBar放在Navigator的内部并根据相关route来取出信息创建toolbar,而不是放在navigator的外面(Android原生系统是放在外面)
eg:
<Navigator initialRoute = {{
    id: '',
    index: 0,
    component: component,
    showToolBar: false,
    title: '',
}}
           configureScene = {(route)=> {
               return Navigator.SceneConfigs.HorizontalSwipeJumpFromRight;
           }}
           renderScene = {(route, navigator)=> {
               //从route中取出相关信息来更新toolbar
               let Component = route.component;//导航器要显示的界面
               myNavigator = navigator;
               let height = route.showToolBar ? 50 : 0;//该路由如果显示toolbar就设置高度,否则就设置为0,就不会显示
               let title = route.title;//该路由要显示的标题
               let onIconClicked = onBackIconClick;//默认的icon点击事件(icon即为toolbar中的最左方的icon)
               if (route.onBackIconClick) {
                   onIconClicked = route.onBackIconClick;//路由中重载的icon点击事件
               }

               if (Component) {
                   return (
                       <View style = {{flex: 1}}>
                           
                           //根据route中的信息创建toolbar
                           <ToolbarAndroid
                               navIcon = {require('')}
                               title = {title}
                               titleColor = {'#fff'}
                               style = {{height: height, backgroundColor: '#63c2ee'}}
                               onIconClicked = {onIconClicked}
                           />
                           <Component navigator = {navigator}
                           />
                       </View>);

               }
           }}/>
  • 1
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值