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/bottom-tabs
	
(2)导入
	import 'react-native-gesture-handler';
	import { NavigationContainer } from '@react-navigation/native';
	import { createBottomTabNavigator } from '@react-navigation/bottom-tabs';
	
(3)使用
	const Tab = createBottomTabNavigator();
	
	<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)lazy	默认值为true。如果为false，则立即呈现所有选项卡。当为true时，选项卡只有在第一次激活时才会呈现。注意:标签不会在以后的访问中重新呈现。
		(5)tabBar: 通过函数返回一个react元素,来自定义底部按钮
			tabBar={props => <MyTabBar {...props} />}
		(6)tabBarOptions 一个包含默认选项卡栏组件道具的对象。如果您使用自定义标签栏，这些将作为道具传递到标签栏，您可以处理它们。
			tabBarOptions:{{
				activeTintColor 选中标签项的标签和图标颜色
				inactiveTintColor	非选中选项卡项的标签和图标颜色。
				activeBackgroundColor
				inactiveBackgroundColor
				tabStyle	选项卡项的样式。
				showLabel	是否为选项卡显示标签，默认为真。
				labelStyle
				labelPosition	标签是在图标下面还是在图标旁边呈现。可能的值是:
				    below-icon
				    beside-icon
				adaptive	标签图标和标签的对齐是否应该根据屏幕的大小而改变?默认值为true。
				allowFontScaling	标签字体是否应缩放以尊重文本大小可访问性设置，默认为真。
				keyboardHidesTabBar	当键盘打开时，标签栏是否隐藏。默认值为false。
				safeAreaInsets	安全区域为屏幕嵌入。这是用来避免像凹槽和系统导航条这样的元素。默认情况下，设备的安全区域insets会被自动检测。您可以使用此选项覆盖行为。
				    top
				    right 
				    bottom
				    left
				style	选项卡栏的样式对象。
			}}
			
			
	Tab.Screen:
	
		options={{
			(1)title 可以用作headerTitle和tabBarLabel回退的通用标题。
			(2)tabBarVisible	true或false表示显示或隐藏标签栏，如果未设置，则默认为true。
			(3)tabBarIcon
				tabBarIcon:({ focused, color, size })=>{
					return (react元素...)
				}
			(4)tabBarLabel 选项文字
			 给定字符串或者返回一个({ focused, color})React元素
			(5)tabBarBadge	要在选项卡图标上的徽章中显示的文本。接受字符串或数字。		
			(6)tabBarButton 函数，该函数返回一个React元素以呈现为选项卡栏按钮。它包装图标和标签并实现
				tabBarButton: props => <xx {...props} />
			(7)tabBarAccessibilityLabel 选项卡按钮的可访问性标签。当用户点击选项卡时，屏幕阅读器将读取该选项卡。如果您没有标签，建议设置这个选项卡。
			(8)tabBarTestID	ID来在测试中定位此选项卡按钮。
			(9)unmountOnBlur 当导航离开该屏幕时，是否应卸载该屏幕。卸载屏幕将重置屏幕中的任何本地状态以及屏幕中嵌套导航器的状态。默认值为false。通常，我们不建议启用这个功能，因为用户不希望在切换标签时丢失导航历史。如果你启用这个道具，请考虑这是否真的会为用户提供更好的体验。
		}}

(5)navigation导航器可绑定的事件
	navigation.addListener('tabPress',(e)=>{...})
	navigation.addListener('tabLongPress', (e) => {...})
	
(6)跳转方法
	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 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();
        return(
          <NavigationContainer>
            <Tab.Navigator
                    tabBarOptions={{
                      activeTintColor: '#e91e63',
                      inactiveTintColor:'blue'
                    }}
            >
              <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