rn 堆栈导航栏stack navigation

刺骨的言语ヽ痛彻心扉 2021-07-24 13:27 914阅读 0赞

栈式导航,类似浏览器效果
    
    (1)安装
    	yarn add @react-navigation/native
    	yarn add react-native-gesture-handler react-native-reanimated react-native-screens react-native-safe-area-context @react-native-community/masked-view
    	yarn add @react-navigation/stack
    	
    (2)在最顶部导入
    	import 'react-native-gesture-handler';
    	import { NavigationContainer } from '@react-navigation/native';
    	import { createStackNavigator } from '@react-navigation/stack';
    
    (3)在render函数内或全局创建stack
          const Stack = createStackNavigator();
          
    (4)引入路由组件,并设置默认路由
    
        <NavigationContainer>
    		  必须包裹在NavigationContainer内
    			
              <Stack.Navigator initialRouteName="默认路由name">
                  <Stack.Screen name="Home" component={函数式组件名/类组件名} options={
       { title: '顶部名称,不写默认为name的值' }}/>
    	...
              </Stack.Navigator>
                  
        </NavigationContainer>
              
             其中:
             	Stack.Navigator属性
             	
             		(0)title 顶部标题
             		
             	    (1)keyboardHandlingEnabled=true/false;  屏幕上的键盘在导航到新屏幕时是否消失,默认true。
             	    
             		(2)initialRouteName="默认路由name"
             		
             		(3)headerMode='none'  标题显示模式,会将所有路由的标题都隐藏
             			'float' 重新绘制头部,直接变化
             			'screen' 具有切换效果
             			
             		(4)mode='card' 默认屏幕转换方式
             			'modal' 将headerMode变成'screen',将屏幕从下方滑入
             			
             		(5)screenOptions={
       { headerStyle: { backgroundColor: 'papayawhip' } }}
             			设置路由总体样式,参数和Stack.Screen中的options相同
             			可以写成一个返回对象配置的函数
             			={({route,navigation})=>({
    						...
    					 })}
    					 
             	Stack.Screen属性
             	
        			options={
       {
        			
        				(1)headerShown:false   该路由不显示标题
        				
        				(2)自定义头部:
            				需要将headerMode设置为'screen'
            				header: ({ scene, previous, navigation }) => {								
    								  return (
    										返回一个react元素
    								  );
    								};
    								
    					(3)定义头部样式
    						headerStyle:{}
    						
    					(4)是否显示头部
    						headerShown
    						
    					(5)头部标题
    						headerTitle
    						字符串或函数，该函数返回要由头文件使用的React元素。默认为场景标题。
    						当指定一个函数时，它将接收一个包含allowFontScaling、style和子属性的对象。
    						children属性包含标题字符串。
    					
    				    (6)标题摆放位置
    				    	headerTitleAlign:'left'/'center'
    				    
    				    (7)标题是否该缩放以尊重文本大小,默认为false
    				    	headerTitleAllowFontScaling
    				    	
    					(8)返回按钮标题字体是否该缩放以尊重文本大小,默认为false
    						headerBackAllowFontScaling
    						
    					(9)设置返回按钮标题图形,返回一个react元素
    						headerBackTitle:({tintColor})=>{
    							return (...)
    						}
    						
    					(10)在iOS上返回按钮使用的标题字符串。默认为上一个场景的headerTitle
    						headerBackTitle
    						
    					(11)当headerBackTitle不适用时代替,默认为'Back'
    						headerTruncatedBackTitle
    						
    					(12)返回按钮是否可见
    						headerBackTitleVisible
    					
    					(13)设置头部右侧内容,返回一个react元素
    						headerRight:(props)=>{return (...)}
    						
    					(14)设置头部左侧内容,返回一个react元素
    						headerLeft:(props)=>{return (...)}
    						
    					(15)设置头部文字样式
    						headerTitleStyle
    					
    					(16)设置返回标题样式
    						headerBackTitleStyle
    						
    					(17)为头部左/右侧内容添加样式
    						headerLeftContainerStyle
    						headerRightContainerStyle
    					
    					(18)若headerTitle返回的是一个react元素,为其添加样式
    						headerTitleContainerStyle
    						
    					(19)设置标题文字颜色
    						headerTintColor:'xx'
    						
    					(20)设置波纹的颜色
    						headerPressColorAndroid
    							安卓>= 5.0
    							
    					(21)标题是否透明
    						headerTransparent
    						
    						默认值为false。如果为真，标题将没有背景，除非您显式地为它提供headerBackground。标题也会浮在屏幕上，这样它就会覆盖下面的内容。
    						这是有用的，如果你想渲染一个半透明的标题或模糊的背景。
    						请注意，如果不希望内容出现在标题下，则需要手动为内容添加顶部空白。React导航不会自动完成。
    						要获得头部的高度，你可以使用HeaderHeightContext与React的上下文API或useHeaderHeight:
    						
    						import { useHeaderHeight } from '@react-navigation/stack';
    						const headerHeight = useHeaderHeight();
    				
    					(22)自定义标题栏背景,返回一个react元素
    						headerBackground:()=>{return (...)}
    					
    					(23)额外的填充添加在顶部的标题，以说明半透明状态栏。
    						headerStatusBarHeight
    						
    					(24)过渡动画时右阴影
    						cardShadowEnabled
    						
    					(25)使用这个道具在过渡期间在卡片下面有一个半透明的黑色覆盖
    						cardOverlayEnabled
    					
    					(26)返回一个React元素以显示为卡的覆盖层。使用这个时，请确保将cardOverlayEnabled设置为true。
    						cardOverlay:()=>{return (...)}
    					
    					(27)设置栈中的卡片样式
    						堆栈中卡片的样式对象。您可以提供一个自定义背景色来代替默认背景色。
    						你也可以指定{backgroundColor: 'transparent'}使之前的屏幕在下面可见(对于透明模式)。
    						这对于实现模态对话框之类的东西很有用。当使用透明背景时，您还应该在堆栈视图配置中指定mode: 'modal'，这样以前的屏幕就不会分离，而在下面仍然可见。进入翻译页面
    				
    					(28)是否在屏幕上使用过渡动画
    						animationEnabled
    						iOS和Android默认为true, Web为false。
    					
    					(29)是否启用手势来关闭屏幕
    						gestureEnabled
    						iOS默认为true，安卓为false。
    					
    					(30)手势触发距离
    						gestureResponseDistance:{
    							horizontal:n, 水平默认50
    							vertical:n 竖直默认135
    						}
    						
    					(31)决定手势的速度相关性的数字。默认为0.3。
    						gestureVelocityImpact
    					
    					(32)手势方向
    						gestureDirection
    						
    					    horizontal
    					    	在RTL中，关闭屏幕的手势从左开始，从右开始。对于动画，屏幕在SlideFromRightIOS中将从右边滑动，在RTL中将从左边滑动。
    						horizontal-inverted
    						vertical
    							关闭屏幕的手势将从顶部开始。对于动画，屏幕将从底部滑动。
    						vertical-inverted
    						
    					(33)安全区域为屏幕嵌入
    					
    					这是用来避免元素像缺口和状态栏。默认情况下，设备的安全区域insets会被自动检测。您可以使用此选项覆盖行为。
    					获取一个包含以下可选属性的对象:
    
    					top/right/bottom/left
    					
    					(34)为卡片的不同部分插入样式。
    						cardStyleInterpolator:({参数})=>({
    							containerStyle 包装卡片的容器视图的样式。
    							cardStyle	表示卡片的视图的样式
    							overlayStyle	表示下面半透明覆盖层的视图的样式
    							overlayStyle	表示卡片阴影的视图的样式。
    						})
    						
    						接收参数:
    						    current  当前屏幕的值:
    						        current.progress 动态节点，表示当前屏幕的进度值
    						    next	堆栈中此窗口之后的屏幕值。如果屏幕动画是最后一个，这可以是未定义的。
    						        next.progress 动态节点，表示下一屏幕的进度值。
    						    index 	堆栈中卡片的索引。
    						    closing  动画节点，表示卡片是否正在关闭。关闭时为1，0没有
    						    layouts 我们用于动画的各种项目的布局测量。
    						        layouts.screen  整个屏幕的布局。包含高度和宽度属性。
    						    
    					(35)为标题的不同部分插入样式。
    						headerStyleInterpolator:({参数})=>({
    							leftLabelStyle	左按钮标签的样式(后退按钮标签)。
    							leftButtonStyle	左边按钮的样式(通常是后退按钮)。
    							rightButtonStyle	右边按钮的样式
    							titleStyle	标题文本的样式。
    							backgroundStyle	标题背景的样式。
    						})
    						
    						接收参数
    						current  当前屏幕的值:
    					       current.progress 动态节点，表示当前屏幕的进度值
    					    next	堆栈中此窗口之后的屏幕值。如果屏幕动画是最后一个，这可以是未定义的。
    					       next.progress 动态节点，表示下一屏幕的进度值。
    						layouts 我们用于动画的各种项目的布局测量。
    						   layouts.screen  整个屏幕的布局。包含高度和宽度属性。
    						   title	标题元素的布局。在不呈现标题时可能未定义。
    						   leftLabel	返回按钮标签的布局。当不呈现后退按钮标签时，可能未定义。
    						   
    					
    					
    					(36)指定动画类型(timing定时或spring弹簧)及其选项(如timing定时的持续时间duration)的对象。它有2个属性:
    					transitionSpec:{
    						open:config, 打开
    						close:config,  关闭
    					}
    					
    					const config = {
    					  animation: 'spring', 支持的值是timing(配置有duration and easing)和spring。
    					  	
    					  config: {
    					    stiffness: 1000,
    					    damping: 500,
    					    mass: 3,
    					    overshootClamping: true,
    					    restDisplacementThreshold: 0.01,
    					    restSpeedThreshold: 0.01,
    					  },
    					};
    					刚度，阻尼，质量，超夹紧，复位位移阈值和复位速度阈值
    
        			}}
      			    
      			    可以写成一个返回对象配置的函数
           			={({route,navigation})=>({
    					...
    				 })}
    				
    				 
    (8)动态修改路由配置参数
    	    navigation.setOptions({
    	      title:'xx'
    	    });
    				 
    
    (9)可通过将跳转按钮包裹在ScrollView内,实现可滑动的导航栏

代码示例:

import 'react-native-gesture-handler';
    import React,{ Component} from 'react'
    import { Text,View,StyleSheet,Button,ScrollView} from 'react-native'
    import {  NavigationContainer } from '@react-navigation/native';
    import {  createStackNavigator } from '@react-navigation/stack';
    import A from './App21'
    
    
    function Home({  navigation }){ 
        return (
            <View style={ {  flex:1, alignItems: 'center', justifyContent: 'center' }}>
              <Text>Home Screen</Text>
            </View>
          );
    }
    
    function DetailsScreen({ navigation}) { 
        return (
          <View style={ {  flex:1,alignItems: 'center', justifyContent: 'center' }}>
            <Text>Details Screen</Text>
          </View>
        );
      }
      
    
    function New({ navigation}) { 
        return (
          <View style={ {  flex: 1, alignItems: 'center', justifyContent: 'center' }}>
            <Text>New Screen</Text>
          </View>
        );
      }
    
    
    
    export default class App extends Component{ 
        render(){ 
            const Stack = createStackNavigator();
            return (
                <>
                    <NavigationContainer>
                        <Stack.Navigator initialRouteName="Home">
                            <Stack.Screen name="Home" component={ Home} options={ {  title: 'Overview' }}/>
                            <Stack.Screen name="Details" component={ DetailsScreen} />
                            <Stack.Screen name="New" component={ New} />
                            <Stack.Screen name="A" component={ A} />
                        </Stack.Navigator>
                    </NavigationContainer>
                    
                </>
        
            );
        }
      }