rn 顶部导航栏

(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