javascript - React Native + Icons：警告：失败的道具类型：提供给ForwardRef（文本）的无效道具.style键tintColor

Question

在带有底部导航选项卡的基本 react-native 应用程序中，

<BottomNavigationTab title='Baz' icon={() => <Icon name='line-chart' size={20} color='#000' />} />

显示错误信息

警告：道具类型失败：提供给 `ForwardRef(Text)` 的 props.style 键 `tintColor` 无效。

但是，如果我们要删除Icon元素，那么

<BottomNavigationTab title='Baz />

工作正常。

问题：是什么原因造成的，我们该如何解决？

使用

• react-native-vector-iconsv6.0.0
• react-navigationv3.11.0
• react-native https://github.com/expo/react-native/archive/sdk-32.0.0.tar.gz "
• react-native-ui-kittenv4.1.0

完整代码

import React from 'react';
import { createBottomTabNavigator, createStackNavigator, createSwitchNavigator, createAppContainer } from 'react-navigation';
import { BottomNavigation, BottomNavigationTab, BottomNavigationProps, Avatar } from 'react-native-ui-kitten';
import Icon from 'react-native-vector-icons/FontAwesome';

import ProfitScreen from '../screens/Profit';

class BottomNavigationShowcase extends React.Component {
    state = {
        selectedIndex: 0,
    };

    onTabSelect = (selectedIndex) => {
        this.setState({ selectedIndex });
    };

    render () {
        return (
            <BottomNavigation
                selectedIndex={this.state.selectedIndex}
                onSelect={this.onTabSelect}
            >
                <BottomNavigationTab title='Baz' icon={() => <Icon name='line-chart' size={20} color='#000' />} />
            </BottomNavigation>
        );
    }
}

const FooStack = createStackNavigator({
    Bar: BarScreen
})

const TabNavigator = createBottomTabNavigator(
    {
        Foo: FooStack,
    }, {
        initialRouteName: 'Foo',
        tabBarComponent: BottomNavigationShowcase
    }
)

const RootNavigator = createSwitchNavigator({
    Main: TabNavigator,
}, {
    initialRoute: "Main"
})

const AppContainer = createAppContainer(RootNavigator);

export default AppContainer 

Answer 1

如果有人遇到这个问题 -这是 Github 上的答案