[英]TabNavigator customize icon error in react-native
I'm using Xcode 10
& latest react-native
version. 我正在使用Xcode 10
和最新react-native
版本。 I created StackNavigator
app with TabNavigator
. 我使用TabNavigator
创建了StackNavigator
应用。
Code: navigation.js
Class 代码: navigation.js
类
import React from "react";
import { TabNavigator, StyleSheet, Text, View, Image} from "react-navigation";
import Dashboard from '.././Screen/Dashboard'
import Home from '.././Screen/Home'
import Events from '.././Screen/Events'
import Settings from '.././Screen/Settings'
export default Tab = TabNavigator({
Home: {
screen: Home,
},
Settings: {
screen: Settings,
navigationOptions: {
tabBarLabel: 'Settings',
tabBarIcon: ({ tintColor }) => (
<Image source={require('.././assets/setting.png')}
style= {{width:15, height:15, tintColor:'black'}}>
</Image>
)
},
},
Events: {
screen: Events,
},
}, {
tabBarPosition: 'bottom',
swipeEnabled: true,
tabBarOptions: {
showIcon: true,
activeTintColor: '#f2f2f2',
activeBackgroundColor: "#2EC4B6",
inactiveTintColor: '#666',
labelStyle: {
fontSize: 16,
padding:4,
}
}
});
But i got error here, 但我在这里出错
[fatal][tid:com.facebook.react.ExceptionsManagerQueue] Unhandled JS Exception: Invariant Violation: Invariant Violation: Invariant Violation: Element type is invalid: expected a string (for built-in components) or a class/function (for composite components) but got: undefined. [致命] [tid:com.facebook.react.ExceptionsManagerQueue]未处理的JS异常:不变违规:不变违规:不变违规:元素类型无效:预期为字符串(对于内置组件)或类/函数(对于复合)组件),但得到:未定义。 You likely forgot to export your component from the file it's defined in, or you might have mixed up default and named imports. 您可能忘记了从定义文件中导出组件,或者可能混淆了默认导入和命名导入。
Check the render method of
TabBarIcon
. 检查TabBarIcon
的渲染方法。
If i remove this line: 如果我删除此行:
tabBarIcon: ({ tintColor }) => (
<Image source={require('.././assets/setting.jpeg')}
style= {{width:15, height:15, tintColor:'black'}}>
</Image>
)
then its working perfectly without icon. 那么它可以完美运行而无需图标。 i searched everything but don't find solution. 我搜索了所有内容,但未找到解决方案。
Please try this ( assuming ur creating a bottom navigator and you have latest react navigation ) 请尝试此操作(假设您创建了底部导航器,并且您具有最新的反应导航)
import { createBottomTabNavigator } from 'react-navigation';
export default createBottomTabNavigator({
Home: {
screen: Home,
},
Settings: {
screen: Settings,
navigationOptions: {
tabBarLabel: 'Settings',
tabBarIcon: ({ tintColor }) => (
<Image source={require('.././assets/setting.png')}
style= {{width:15, height:15, tintColor:'black'}}>
</Image>
)
},
},
Events: {
screen: Events,
},
}, {
tabBarPosition: 'bottom',
swipeEnabled: true,
tabBarOptions: {
showIcon: true,
activeTintColor: '#f2f2f2',
activeBackgroundColor: "#2EC4B6",
inactiveTintColor: '#666',
labelStyle: {
fontSize: 16,
padding:4,
}
}
});
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.