无法使用自定义标签栏反应本机
Cannot use custom tab bar react native
我正在尝试使用 @react-navigation/material-bottom-tabs
创建自定义标签栏,但我无法编辑整个标签栏,这是我的代码:
import { createMaterialBottomTabNavigator } from '@react-navigation/material-bottom-tabs';
const Tab = createMaterialBottomTabNavigator();
function MyTabs() {
return (
<Tab.Navigator tabBar={props => <MyTabBar {...props} />}>
<Tab.Screen name="Home" component={HomeScreen} />
<Tab.Screen name="Settings" component={SettingsScreen} />
</Tab.Navigator>
);
}
您可以使用 renderLabel
和 renderIcon
方法,如果您想使用 tabBar
,则需要使用 @react-navigation/bottom-tabs
而不是 @react-navigation/material-bottom-tabs
,如下所示:
import { createBottomTabNavigator } from '@react-navigation/bottom-tabs';
const Tab = createBottomTabNavigator();
function MyTabs() {
return (
<Tab.Navigator tabBar={props => <MyTabBar {...props} />}>
<Tab.Screen name="Home" component={HomeScreen} />
<Tab.Screen name="Settings" component={SettingsScreen} />
</Tab.Navigator>
);
}
我正在尝试使用 @react-navigation/material-bottom-tabs
创建自定义标签栏,但我无法编辑整个标签栏,这是我的代码:
import { createMaterialBottomTabNavigator } from '@react-navigation/material-bottom-tabs';
const Tab = createMaterialBottomTabNavigator();
function MyTabs() {
return (
<Tab.Navigator tabBar={props => <MyTabBar {...props} />}>
<Tab.Screen name="Home" component={HomeScreen} />
<Tab.Screen name="Settings" component={SettingsScreen} />
</Tab.Navigator>
);
}
您可以使用 renderLabel
和 renderIcon
方法,如果您想使用 tabBar
,则需要使用 @react-navigation/bottom-tabs
而不是 @react-navigation/material-bottom-tabs
,如下所示:
import { createBottomTabNavigator } from '@react-navigation/bottom-tabs';
const Tab = createBottomTabNavigator();
function MyTabs() {
return (
<Tab.Navigator tabBar={props => <MyTabBar {...props} />}>
<Tab.Screen name="Home" component={HomeScreen} />
<Tab.Screen name="Settings" component={SettingsScreen} />
</Tab.Navigator>
);
}