react-native-navigation 实现底部导航栏布局（Android）

import React from 'react';
import { View, StyleSheet, TouchableOpacity, Text, Platform } from 'react-native';
import { Icon } from 'react-native-elements';
 
const BottomTabBar = ({ state, descriptors, navigation }) => {
  const focusedOptions = descriptors[state.routes[state.index].key].options;
  const iconName = focusedOptions.tabBarIcon;
  const iconType = focusedOptions.tabBarIconType;
  const iconSize = focusedOptions.tabBarIconSize;
  const iconColor = focusedOptions.tabBarIconColor;
 
  return (
    <View style={styles.container}>
      {state.routes.map((route, index) => {
        const isFocused = state.index === index;
        const onPress = () => navigation.navigate(route.name);
        const options = descriptors[route.key].options;
 
        return (
          <TouchableOpacity key={route.key} style={styles.tab} onPress={onPress}>
            <Icon
              name={isFocused ? options.tabBarActiveIcon : iconName}
              type={iconType}
              size={iconSize}
              color={isFocused ? options.tabBarActiveColor : iconColor}
            />
            {isFocused && (
              <Text style={styles.label}>{options.tabBarLabel}</Text>
            )}
          </TouchableOpacity>
        );
      })}
    </View>
  );
};
 
const styles = StyleSheet.create({
  container: {
    flexDirection: 'row',
    height: 50,
    backgroundColor: '#fefefe', // 底部导航栏背景颜色
  },
  tab: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
  },
  label: {
    fontSize: 12,
    color: '#333333', // 文本颜色
  },
});
 
export default BottomTabBar;

这段代码实现了一个简单的底部导航栏组件，它使用了react-native-elements库中的Icon组件来显示图标，并且可以根据标签是否被聚焦来切换不同的图标。同时，它还演示了如何使用React Navigation的useNavigation钩子来处理导航逻辑。这个组件可以作为React Navigation底部导航的一个自定义标签栏，并且可以很容易地根据项目需求进行样式和功能的调整。