如何在反应纸的BottomNavigation组件中改变选定图标的颜色？

Question

我有下一页使用BottomNavigation

import React from 'react'
import {
  BottomNavigation,
  DefaultTheme,
  Provider as PaperProvider,
} from 'react-native-paper'
import ChatScreen from './presentation/screens/ChatScreen'
import HomeScreen from './presentation/screens/HomeScreen'
import MapScreen from './presentation/screens/MapScreen'
import PostScreen from './presentation/screens/PostScreen'
import ProfileScreen from './presentation/screens/ProfileScreen'

const App = () => {
  const [index, setIndex] = React.useState(0)
  const [routes] = React.useState([
    {key: 'home', icon: 'home'},
    {key: 'map', icon: 'compass'},
    {key: 'post', icon: 'plus-box'},
    {key: 'profile', icon: 'account'},
    {key: 'chat', icon: 'forum'},
  ])

  const renderScene = BottomNavigation.SceneMap({
    home: HomeScreen,
    map: MapScreen,
    post: PostScreen,
    profile: ProfileScreen,
    chat: ChatScreen,
  })

  return (
    <PaperProvider theme={lightTheme}>
      <BottomNavigation
        labeled={false}
        navigationState={{index, routes}}
        onIndexChange={setIndex}
        renderScene={renderScene}
      />
    </PaperProvider>
  )
}

export default App

此代码使用主题的默认图标色调颜色。但是，如何为每个图标使用不同的颜色呢？

​

​

Answer 1

您可以使用反应-本机矢量图标库。现在您可以将自定义颜色设置为图标。

例如：

import FontAwesome from 'react-native-vector-icons/FontAwesome';


{ key: 'home', icon: (props) => <FontAwesome color="pink" {...props} name='home' /> },