带有5个项目的BottomNavigatorBar图标:等间距/等宽度(颤动/省道)

import React from 'react';
import { View, TouchableOpacity, Image, StyleSheet } from 'react-native';

const BottomNavigatorBar = () => {
  return (
    <View style={styles.container}>
      {[1, 2, 3, 4, 5].map((item, index) => (
        <TouchableOpacity key={index} style={styles.button}>
          <Image source={{ uri: `icon${item}.png` }} style={styles.icon} />
        </TouchableOpacity>
      ))}
    </View>
  );
};

const styles = StyleSheet.create({
  container: {
    flexDirection: 'row',
    justifyContent: 'space-around',
    alignItems: 'center',
    height: 60,
    backgroundColor: '#f8f8f8',
    borderTopWidth: 1,
    borderTopColor: '#ccc',
  },
  button: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
  },
  icon: {
    width: 24,
    height: 24,
  },
});

export default BottomNavigatorBar;