[英]React native bottom tab navigation not working and icons appear on top of eachother
我的反应导航有一个非常奇怪的行为,每当我想使用底部标签导航时,它都不会加载任何屏幕,并且图标会相互叠加。
我安装了所有需要的导航包,就像react-native-safe-area-context
react-native-screens
导航.js
import {
Cases,
Employees,
...
} from './../screens'
export const adminBottomTabs = [
{
name: 'CASES',
label: 'Cases',
component: Cases,
icon: 'home',
icon_active: 'home',
},
{
name: 'EMPLOYEES',
label: 'Employees',
component: Employees,
icon: 'users',
icon_active: 'users',
},
...
]
Admin.jsx(我加载导航的地方)
export const Admin = ({ navigation }) => {
return (
<View style={[mainStyles.screen, { flex: 1 }]}>
<Tab.Navigator>
{
adminBottomTabs.map(route => (
<Tab.Screen
key={route.name}
name={route.name}
component={route.component}
initialParams={{ name: route.name }}
options={{
headerShown: false,
tabBarLabel: route.label,
tabBarIcon: ({ focused, color }) => (
<Icon name={route.icon} color={color} />
),
tabBarOptions: {
activeTintColor: '#333333',
inactiveTintColor: '#333333',
},
}}
/>
))
}
</Tab.Navigator>
</View>
)
}
自定义图标组件
import {createIconSetFromIcoMoon} from 'react-native-vector-icons';
import icoMoonConfig from './selection.json';
export default createIconSetFromIcoMoon(icoMoonConfig);
感谢@ronakdholariya 的回答,问题是我使用alignItems: 'center'
我对此类进一步问题的建议是取出所有可能影响 styles 等行为的行为,插件并将它们一一带回来。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.