在带有底部导航选项卡的基本 react native 应用程序中,
<BottomNavigationTab title='Baz' icon={() => <Icon name='line-chart' size={20} color='#000' />} />
显示错误消息
Warning: Failed prop type: Invalid props.style key `tintColor` supplied to `ForwardRef(Text)`.
但是,如果我们要删除 Icon
元素,那么
<BottomNavigationTab title='Baz />
工作正常。
问题:是什么原因导致此问题以及我们如何解决它?
使用
react-native-vector-icons
v6.0.0react 导航
v3.11.0react-native
https://github.com/expo/react-native/archive/sdk-32.0.0.tar.gz ”react-native-ui-kitten
v4.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
最佳答案
如果有人遇到此问题 - here is an answer on Github
关于javascript - React Native + Icons : Warning: Failed prop type: Invalid props.样式键tintColor提供给ForwardRef(Text),我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/57013538/