React Native未来导航库：react-navigation 使用详解（进阶篇）

最新推荐文章于 2021-12-21 10:07:39 发布
置顶 最新推荐文章于 2021-12-21 10:07:39 发布
阅读量4.4k 收藏 2
点赞数 3
文章标签： React Native react-navigation
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/u013718120/article/details/79461446
版权

欢迎大家关注【跨平台开发那些事】公众号，定期推送跨平台开发技术实践。

本篇内容为react-navigation的进阶内容以及高级用法。基础篇请看：

React Native未来导航者：react-navigation 使用详解（基础篇）


（1）适配顶部导航栏标题：
   测试中发现，在iphone上标题栏的标题为居中状态，而在Android上则是居左对齐。所以需要我们修改源码，进行适配。
【node_modules -- react-navigation -- src -- views -- Header.js】的326行代码处，修改为如下：


                

        

        

    




        

            

                

                

                了解本专栏
                
                
                  
                订阅专栏 解锁全文
                 
                
                    
                    超级会员免费看
                
            

            
            
            
        

    

      

        

            

              
                
                  Songlcy
                
              
            

            

                关注
              
            

        

        

          
    
            
  • 
              
                
                
                
                
                    3
                
              
              
    点赞
    
            
    • 
            
  • 
              
                
                
                
              
              
    踩
    
            
    • 
            
  • 
              
                
                
                
                
                    2
                
              
              
    
                
    
                  
                    收藏
                  
                
    
              
    
              
    
                
    
                  觉得还不错?
                  
                    一键收藏
                  
                 
                
    
              
    
            
    • 
                
  • 
                  
                    打赏
                    
                  
                  
    打赏
    
                
    • 
          
  • 
            
    
              
              
            
    
              
              
              
                  4
              
            
            
    评论
    
          
    • 
          
  • 
          
    • 
          
  • 
            
              
            
              
    
            
              
                
            
    
          
    • 
        

      

      

            

                专栏目录
          

                

                        订阅专栏
                










                



	

		

			

				
					
react-navigation使用技巧（再进阶）

				
			

			

				

					一条宝鱼的专栏
				

				

					11-03
					
					633
					
				

			

		

		

			
				
本文是基于最新的react-navigation^3.x来书写的。


以下15条，在我开源的识兔中，都是可以找到实例的，欢迎参考，欢迎star

前言

关于react-navigation的文章，这已经是第三篇了，这个库从最初的beta版到最新的2.x版本，更新频率是很快的，这个库也越来越完善，很多1.x的技巧已经完全不适用于新的版本，然而群里每天又有很多人再问，为了解(jiao)决(yu)这个问题，所以，动手写了这篇文章。

更新版本到react-navigation3.x！


因为react-n.

			
		

	



                

              
                



	

		

			

				
					
react-navigation 常用方法总结

				
			

			

				

					秋刀鱼笛滋味
				

				

					11-14
					
					502
					
				

			

		

		

			
				
1，创建底部选项卡 createBottomTabNavigator
import React from "react";
import { StyleSheet, Image } from "react-native";
import {setSpText, scaleSizeW} from '../utils/util';
import Home from '../page/home/home...

			
		

	



                


  
              

                


	

		

			

				
					
react-navigation使用技巧

				
			

			

				

					大灰狼的小绵羊哥哥的博客
				

				

					05-19
					
					8384
					
				

			

		

		

			
				
http://www.jianshu.com/u/9895046b765d

react-native.jpeg



本文是基于react-navigation^1.0.0-beta.9来书写的。

如果遇到什么问题可以在评论区回复，或者加QQ群397885169讨论

识兔，一款用来识别图片的开源项目，在未来还会添加更多有意思的东西

App.js存放着本文的配置例子


			
		

	





	

		

			

				
					
React-navigation导航系统(6)-Views

				
			

			

				

					大灰狼的小绵羊哥哥的博客
				

				

					05-08
					
					1万+
					
				

			

		

		

			
				
tags: React-Native

Views

Navigation 视图是接受router和navigaion 的prop的表征组件,通过navigation.state的设定,可以显示几个screens.
Navigation view是被控制的React组件,表征当前的navigation state.他们管理screen之间的切换,动画和手势.他们也持久化navigatio

			
		

	



		

			
		



	

		

			

				
					
navigation怎么传参以及怎么接收

				
			

			

				

					qq_45679015的博客
				

				

					06-24
					
					3102
					
				

			

		

		

			
				
来看看我们的HomeScreen.js页面，当我们点击卡片的时候，我们想要把card的参数传到sectionScreen中，于是：


 <TouchableOpacity
    key={index}
    onPress={()=>{
         this.props.navigation.push('Section',{section:card})
        }}
       >
     <Card
      image={card.image}
    

			
		

	





	

		

			

				
					
React Native react-navigation 导航使用详解

				
			

			

				

					08-28
				

			

		

		

			
				
本篇文章主要介绍了React Native react-navigation 导航使用详解，详解的介绍了react-navigation导航的使用，具有一定的参考价值，有兴趣的可以了解一下

			
		

	





	

		

			

				
					
React Native中导航组件react-navigation跨tab路由处理详解

				
			

			

				

					11-28
				

			

		

		

			
				
大家应该都有所体会，我们在一般应用都有跨tab跳转的需求， 这就需要特别处理下路由，所以 下面是使用react-navigation作为路由组件的一种方式. 具体情境是: app分三大模块Home主页, Bill账单和Me我的, 对应三个tab....

			
		

	





	

		

			

				
					
react-navigation-demo:对导航组件react-navigation的使用讲解

				
			

			

				

					05-15
				

			

		

		

			
				
react-navigation导航组件使用详解 注意了，如果有小伙伴们发现运行作者提供的react-navigation示例项目报如下的错误，可能是大家使用了 yarn install 命令，解决这个错误的办法就是将nodemodules删除，然后使用npm ...

			
		

	





	

		

			

				
					
React-Navigation架构嵌套路由：

				
			

			

				

					贺知叶的博客
				

				

					12-21
					
					1550
					
				

			

		

		

			
				
React-Navigation ^5x架构嵌套路由：
react-native使用的版本是^0.64，导航用的5x。目前已经出到了6x,不过也相差不大。


目录React-Navigation ^5x架构嵌套路由：前言一、React-Navigation包引用二、import { NavigationContainer } from '@react-navigation/native'1.注册主路由容器 NavigationContainer2.App.js / index.js三、import { c

			
		

	





	

		

			

				
					
React Native之react-navigation总结

				
			

			

				

					 飞翔的熊blabla
				

				

					07-22
					
					294
					
				

			

		

		

			
				
react-navigation号称拥有近乎原生页面切换的性能，在项目中开始投入使用以来，确实发现了其优越性，一定程度上解决了RN在页面路由管理方面上的薄弱，下面就我在项目中遇到的坑和难点做一个总结。

1、Header的参数设置后无效

每一个navigator只会查看其直接子级进行配置，比如一个页面在一个stackNavigator里，而这个stackNavigator在一个tabNavi...

			
		

	





	

		

			

				
					
React Native未来导航库：react-navigation 使用详解（基础篇）

					
热门推荐

				
			

			

				

					...
				

				

					05-17
					
					9万+
					
				

			

		

		

			
				
欢迎大家关注【跨平台开发那些事】公众号，定期推送跨平台开发技术实践。





上篇博客和大家分享了关于React Native jsBundle预加载，界面启动优化的内容，详情可点击：

基于最新版本React Native实现JsBundle预加载，界面秒开优化



一、开源库介绍

今年1月份，新开源的react-natvigation库备受瞩目。在短短不到3个月的时间，gith...

			
		

	





	

		

			

				
					
RN与原生交互（一）——基本页面跳转

				
			

			

				

					weixin_33920401的博客
				

				

					06-13
					
					1096
					
				

			

		

		

			
				
React Native(以下简称RN)开发app过程中大部分都可以在JS端完成，但是也有一些功能是需要原生端来完成的。这时RN与原生端就不可避免的需要进行交互，比如页面跳转和数据传递。本篇文章主要以RN——原生、原生——RN——原生为例来讲解如何进行基本的页面跳转操作。
关于页面跳转，我写了三个demo。这里发下地址：

RNAddNative
RNPushToNative
NativeJump...

			
		

	





	

		

			

				
					
react navigation的学习与使用

				
			

			

				

					卓原的进化之旅
				

				

					06-04
					
					1万+
					
				

			

		

		

			
				
在很久之前，RN中文网说推荐用react-navigation替代navigator作为新的导航库，从RN 0.43版本开始，官方就已经停止维护Navigator了，所以强烈建议大家迁移到新的react-navigation库，而且新的导航库无论从性能还是易用性上都要大大好于老的Navigator！附上英文文档地址,这个是我自己写的导航例子:https://github.com/lizhuoyua...

			
		

	





	

		

			

				
					
React Native导航器之react-navigation使用

				
			

			

				

					xiangzhihong8的专栏
				

				

					05-06
					
					2万+
					
				

			

		

		

			
				
在上一节Navigation组件，我们使用系统提供的导航组件做了一个跳转的例子，不过其实战能力不强，这里推荐一个超牛逼的第三方库：react-navigation。在讲react-navigation之前，我们先看一下常用的导航组件。导航控件常见的导航主要分为三种： 
1.StackNavigator ：类似于普通的Navigator，屏幕上方导航栏 
2.TabNavigator：obviousl

			
		

	





	

		

			

				
					
ReactNavigation 重置路由栈的两种方法 以及SwitchNavigator不处理回退操作

				
			

			

				

					卓原的进化之旅
				

				

					03-02
					
					1万+
					
				

			

		

		

			
				
我们在项目中尝尝有这样的需求 , 给app添加一个广告业/启动页/引导页等等, 之后进入app的主页面 , 前面的 广告业/启动页/引导页 不提供入口,并且按返回键也不会回到那个页面. 一般我们会跳转到主页之后重置路由,今天提供两种方法来实现.

首先是跳转之后重置路由:

//首先导入NavigationActions
import {NavigationActions} from 'react...

			
		

	





	

		

			

				
					
react-native新导航组件react-navigation详解

				
			

			

				

					大灰狼的小绵羊哥哥的博客
				

				

					04-14
					
					5万+
					
				

			

		

		

			
				
react-navigation

react-navigation 是今年1月份新出的一款react-native导航组件, 才几个月github就三千多star, 半官方身份, fb推荐使用,
 据称性能和效果跟原生差不多. 可能是react-native导航组件的未来主流. 但现在还是beta版本(最新v1.0.0-beta.7)
 坑还比较多, 文档和参考资料较少. 正式项目使用还

			
		

	





	

		

			

				
					
React-navigation导航系统(3)-高级指南

				
			

			

				

					大灰狼的小绵羊哥哥的博客
				

				

					05-08
					
					5835
					
				

			

		

		

			
				
tags: React-Native

Redux Intergration

http://www.jianshu.com/p/469976fb7fd3

为了在redux中处理app的navigation state,你可以传递你自己的navigation prop到一个navigator.你的navigation
 prop必须提供当前的state,还有就是处理navigati

			
		

	





	

		

			

				
					
React-navigation导航系统(2)

				
			

			

				

					大灰狼的小绵羊哥哥的博客
				

				

					05-08
					
					5500
					
				

			

		

		

			
				
tags: React-native

Navigators

http://www.jianshu.com/p/8b38d1b654f9

Navigators允许你定义你的导航结构.Navigators也可以渲染普通的元素,例如你配置好的header和tab bar.
navigators可以是单纯的React组件.

内建的Navigators

react-navig

			
		

	





	

		

			

				
					
React-Native利用React Navigation实现页面跳转——很好的RN入门DEMO

				
			

			

				

					yingzizizizizizzz的专栏
				

				

					09-11
					
					8753
					
				

			

		

		

			
				
功能：

1、简单的查看电影demo

2、点击按钮跳转

3、点击列表页中的某一条跳转到相应详情页

页面：

首页=&gt;电影列表页=&gt;详情页



总结：

1、练习了props，state，样式，长列表，网络，触摸事件，Flexbox布局（学习资料：http://flexboxfroggy.com/）

2、练习了使用导航器跳转页面 https://reactnative.cn/d...

			
		

	





	

		

			

				
					
react-native link react-native-pdf
zsh: command not found: react-native

					
最新发布

				
			

			

				

					12-29
				

			

		

		

			
				
要解决"zsh: command not found: react-native"的问题，你需要确保已经正确安装了react-native-cli并且已经将其添加到了系统的环境变量中。  以下是在Windows和Mac上安装和配置react-native-cli的步骤：  Windows： ...

			
		

	



              



  
“相关推荐”对你有帮助么？

  

      
    
          
  • 
              
    
                  
                  
              
    
              
    非常没帮助
    
          
    • 
          
  • 
              
    
                  
                  
              
    
              
    没帮助
    
          
    • 
          
  • 
              
    
                  
                  
              
    
              
    一般
    
          
    • 
          
  • 
              
    
                  
                  
              
    
              
    有帮助
    
          
    • 
          
  • 
              
    
                  
                  
              
    
              
    非常有帮助
    
          
    • 
      

      

      

          
          提交
      

      

  




          




        



    





    



      

      

        
      

      





	

		
评论 4

	

	
	




  

    

      添加红包
      
    

    

      

        
        

          
          
        

        
请填写红包祝福语或标题

      

      

        
        

          
          个
        

        
红包个数最小为10个

      

      

        
        

          
          元
        

        
红包金额最低5元

      

      

        
        

          当前余额3.43元
          前往充值 >
        

      

      

        

          需支付：10.00元
        

        
        
      

    

  





  

    
    
  

  

    
    
  








  

    

      

        

          

            
            
成就一亿技术人!

          

          

        

        

          

          

            领取后你会自动成为博主和红包主的粉丝
            规则
          

        

      

      

        

          

            
              
            
            

              
hope_wisdom
 发出的红包
            

          

        

        

          

          

          

        

      

    

    

  





	
打赏作者

	

		

		
			
		
		

		

			
Songlcy

			
你的鼓励将是我创作的最大动力

		

	

	

			

	

	

    ¥1
    ¥2
    ¥4
    ¥6
    ¥10
    ¥20
	

	

		

			

				

					扫码支付：¥1
				

				

					

					
					获取中
					

				

				

					
					
					扫码支付
				

			

		

		

			
您的余额不足，请更换扫码支付或充值

			
打赏作者

		

	



      
      

      
实付元

      
使用余额支付

      

        

          

            
            点击重新获取
          

        

        
扫码支付

      

      

        
          
            
          
          
        
      

      

        
        钱包余额
          0
          

            
            

              

                
抵扣说明：

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

              

            

          

      

      余额充值