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