react-native - react native如何自定义底部导航

Question

尝试像下图一样在本机反应中构建底部导航有什么帮助吗？ 在此处输入图像描述

标签： react-native

Answer 1

你可以使用tabbaricon和tabBarLabel

https://reactnavigation.org/docs/bottom-tab-navigator/#tabbaricon

import {createBottomTabNavigator} from '@react-navigation/bottom-tabs';
const Tab = createBottomTabNavigator();


return (
<Tab.Navigator>
      <Tab.Screen
        name="Home"
        component={Home}
        options={{
          tabBarLabel: 'Home',
          tabBarIcon: ({focused, horizontal, tintColor}) => (
            //  https://reactnavigation.org/docs/bottom-tab-navigator/#tabbaricon
            <Image
              fadeDuration={0}
              style={{width: 22, height: 22}}
              source={}
            />
          ),
        }}
      />
</Tab.Navigator>
)