Javascript 如何将选项卡选项添加到下面的代码中？这样我就可以用色彩了

如何将选项卡栏选项添加到下面的代码中，并使用淡色。 我想对选项卡栏选项内的图标使用active和inactive

import React from 'react'
import { SafeAreaView, Text } from 'react-native';
export default class Chat extends React.Component {
static navigationOptions = ({ navigation }) => {
    let tabBarIcon = () => {
        return <MaterialIcons
            style={{ backgroundColor: 'transparent' }}
            name={'chat'}
            color={'#000'}
            size={30}
        />
    }
    return { tabBarIcon }
}
render(){
    return(
        <SafeAreaView>
            <Text>Chat</Text>
        </SafeAreaView>
    )
}

从“React”导入React
从“react native”导入{SafeAreaView，Text}；
导出默认类Chat.Component{
静态导航选项=（{navigation}）=>{
让tabBarIcon=（）=>{
返回
}
返回{tabBarIcon}
}
render（）{
返回(
聊天
)
}

}

如官方文件所述。tabBarIcon是一个函数，它被赋予聚焦状态、tintColor和水平参数，这是一个布尔值

试试这个

static navigationOptions = ({ navigation }) => {
    let tabBarIcon = ({ focused, horizontal, tintColor }) => {
        return <MaterialIcons
            style={{ backgroundColor: 'transparent' }}
            name={'chat'}
            color={tintColor}
            size={30}
        />
    }
    return { tabBarIcon }
}

静态导航选项=（{navigation}）=>{
让tabBarIcon=（{聚焦，水平，着色}）=>{
返回
}
返回{tabBarIcon}
}