rn 顶部导航栏

逃离我推掉我的手 2021-07-24 12:45 809阅读 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/material-top-tabs react-native-tab-view
    	
    (2)导入
    	import 'react-native-gesture-handler';
    	import { NavigationContainer } from '@react-navigation/native';
    	import { createMaterialTopTabNavigator } from '@react-navigation/material-top-tabs';
    	
    (3)使用
    	const Tab = createMaterialTopTabNavigator();
    	<NavigationContainer>
    	    <Tab.Navigator>
    	      <Tab.Screen name="Home" component={HomeScreen} />
    	      <Tab.Screen name="Settings" component={SettingsScreen} />
    	    </Tab.Navigator>
        </NavigationContainer>
       
    (4)Tab.Navigator参数配置
    	(1)initialRouteName
    	(2)screenOptions
    	(3)backBehavior 返回按钮处理的行为。
    		initialRoute	返回初始选项卡
    		order	返回到上一个选项卡(按照选项卡栏中显示的顺序)
    		history	返回到上次访问的标签页
    		none	不处理后退按钮
    	(4)tabBarPosition 选项卡栏在选项卡视图中的位置。可能的值是	
    		'top' and 'bottom'.	默认是'top'.
    	(5)lazy	默认值为true。如果为false，则立即呈现所有选项卡。当为true时，选项卡只有在第一次激活时才会呈现。注意:标签不会在以后的访问中重新呈现。
    	(6)lazyPreloadDistance	当lazy被启用时，您可以指定有多少相邻的路由应该提前用这个道具预加载。这个值默认为0，这意味着延迟页面在进入视窗时被加载。
    	(7)lazyPlaceholder	函数，该函数返回一个React元素来呈现尚未呈现的路由。接收包含路由作为参数的对象。还需要启用延迟支撑。
    	 	lazyPlaceholder=({路由参数})=>{return react元素...}
    	(8)removeClippedSubviews	布尔值，指示是否从本机视图层次结构中移除不可见的视图(如未聚焦的屏幕)以提高内存使用。默认值为false。
    	(9)keyboardDismissMode	指示键盘是否响应拖动手势而被取消。可能的值是:
    		'auto'(默认):当索引改变时，键盘将被取消。
    		'on-drag':当拖拽开始时，键盘消失。
    		'none':拖动不会关闭键盘。
    	(10)swipeEnabled	指示是否启用滑动手势的布尔值来滑动页面
    	(11)timingConfig	当单击选项卡时发生的计时动画的配置对象。支持属性是:
    		duration:n
    	(12)在滑动后发生的spring(弹簧)动画的配置对象。支持属性是:
    		    damping (number)
    		    mass (number)
    		    stiffness (number)
    		    restSpeedThreshold (number)
    		    restDisplacementThreshold (number)
    	(13)initialLayout	对象，其中包含屏幕的初始高度和宽度。通过它可以提高初始渲染的性能。对于大多数应用程序，这是一个好的默认:
    		initialLayout={ width: Dimensions.get('window').width }}
    	(14)position	动画(从反应-本机-reanimated)值来侦听位置更新。传递的位置值将与制表符的当前位置保持同步。它对于访问选项卡视图之外的动画值非常有用。
    	(15)sceneContainerStyle	样式应用于包装每个屏幕的视图。你可以通过这个来覆盖一些默认的样式，如溢出剪切:
    	(16)style	样式，以应用于选项卡视图容器。
    	(17)pager	函数，该函数返回一个React元素作为分页器使用。寻呼机处理滑动手势和页面切换。默认情况下，我们使用反应-本机手势处理程序来处理手势。您可以将寻呼机切换为不同的实现来定制体验。
    		import ViewPagerAdapter from 'react-native-tab-view-viewpager-adapter';
    		pager={props => <ViewPagerAdapter {...props} />}
    	(18)tabBar	函数，该函数返回一个React元素以显示为选项卡栏
    	(19)tabBarOptions	包含选项卡栏组件道具的对象。它可以包含以下属性:
    		    activeTintColor 
    		    inactiveTintColor 
    		    showIcon 	是否显示选项卡图标，默认为false。
    		    showLabel 	是否为选项卡显示标签，默认为真。
    		    pressColor	波纹的颜色(Android >= 5.0 only)。
    		    pressOpacity	按下标签的不透明度(只有iOS和Android < 5.0)。
    		    scrollEnabled 	是否启用可滚动选项卡。
    		    tabStyle 	选项卡的样式对象。
    		    indicatorStyle	选项卡指示器的样式对象(在选项卡底部的行)。
    		    labelStyle	选项卡标签的样式对象。在此指定颜色将覆盖中指定的颜色activeTintColor and inactiveTintColor
    		    iconStyle 	
    		    style	选项卡栏的样式对象。
    		    allowFontScaling 	标签字体是否应缩放以尊重文本大小可访问性设置，默认为真。
    		    renderIndicator	函数，该函数接受一个具有当前路由的对象，并返回一个定制的React元素作为选项卡指示器。
    		    
    (5)Tab.Screen参数配置
    	title
    	tabBarIcon
    	tabBarLabel
    	tabBarAccessibilityLabel	选项卡按钮的可访问性标签。当用户点击选项卡时，屏幕阅读器将读取该选项卡。如果您没有标签，建议设置这个选项卡。
    	tabBarTestID	ID来在测试中定位此选项卡按钮。
    	
    (6)navigation导航器可绑定的事件
    	navigation.addListener('tabPress',(e)=>{...})
    	navigation.addListener('tabLongPress', (e) => {...})
    	
    (7)跳转方法
    	navigation.jumpTo('Profile', { name: 'Michaś' });

代码示例:

import React,{ Component} from 'react'
    import 'react-native-gesture-handler';
    import {  NavigationContainer } from '@react-navigation/native';
    import {  createStackNavigator } from '@react-navigation/stack';
    import {  createBottomTabNavigator } from '@react-navigation/bottom-tabs';
    import {  createMaterialTopTabNavigator } from '@react-navigation/material-top-tabs';
    import FontAwesome from 'react-native-vector-icons/FontAwesome';
    
    import { 
      View,
      Text,
      StyleSheet,
      Button
    } from 'react-native'
    
    class App extends Component{ 
    
        render()
        { 
          const Stack = createStackNavigator();
          // const Tab = createBottomTabNavigator();
          const Tab = createMaterialTopTabNavigator();
            return(
              <NavigationContainer>
                <Tab.Navigator
                        tabBarOptions={ { 
                          activeTintColor: '#e91e63',
                          inactiveTintColor:'blue',
                          showIcon:true
                        }}
                >
                  <Tab.Screen name="Home" component={ Home} options={ { 
                    tabBarIcon:({ color,size})=>{ 
                      return <FontAwesome name="rocket" size={ 30} color={ color}/>
                    }
                  }}/>
                  <Tab.Screen name="Detail" component={ Detail} options={ { 
                      tabBarIcon:({ color,size})=>{ 
                        return <FontAwesome name="music" size={ 30} color={ color}/>
                      }
                  }} />
                </Tab.Navigator>
              </NavigationContainer>
                    
            )
        }
    }
    
    class Home extends Component{ 
      
      render()
      {  
        console.log
          return(
    
              <View>
                  <Text>homea</Text>
                  <FontAwesome name="rocket" size={ 30} color="#900"/>
                  <Button
                    onPress={ ()=>{ 
                      this.props.navigation.navigate('Detail');
                    }} 
                    title='go'
    
                  />
              </View>
          )
      }
    }
    
    class Detail extends Component{ 
    
      render()
      { 
          return(
    
              <View>
                  <Text>details</Text>
              </View>
          )
      }
    }
    
    
    const styles = StyleSheet.create({ 
      
    
    })
    
    
    export default App