如何更改 React Native Paper 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

您可以使用 react-native-vector-icons 库。现在您可以为图标设置自定义颜色了。

例如：

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


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

如何更改 React Native Paper BottomNavigation 组件中所选图标的颜色？

How to change colour of selected icon in the BottomNavigation component of React Native Paper?

typescript

react-native

react-native-paper