自定義 React Native 抽屜導航

Question

我想創建這樣的抽屜導航

我可以添加圖標，但不知道如何設計圖片中的右側

那是我的抽屜導航器

 <Drawer.Navigator
          drawerContent={(props) => <CustomDrawer {...props} />}
          drawerStyle={{
            width: '80%',
          }}>
          <Drawer.Screen name={strings.NAV_HOME} component={StackComp} />
          <Drawer.Screen name={strings.NAV_MY_PROFILE} component={Proifle} />
          <Drawer.Screen name={strings.NAV_SETTING} component={Setting} />
          <Drawer.Screen
            name={strings.NAV_MANAGE_BOOKING}
            component={Booking}
          />
        </Drawer.Navigator>

那是我的自定義代碼

 <DrawerContentScrollView
        style={{backgroundColor: colors.themeColor, flex: 1}}
        {...props}>
        <View style={{flex: 1}}>
          <View
            style={{
              flex: 1,
              paddingTop: moderateScaleVertical(24),
            }}>
            <Image
              source={imagePath.logo}
              style={{marginLeft: moderateScale(16)}}
            />
            <TouchableOpacity
              onPress={() => navigation.navigate(strings.NAV_HOME)}
              style={styles.drawCont}>
              <Image source={imagePath.homeIcon} />
              <Text style={styles.text}>{strings.HOME}</Text>
            </TouchableOpacity>
          </View>
        </View>
      </DrawerContentScrollView>

有人可以告訴我如何像圖像中那樣設計它嗎？

Answer 1

要創建drawer組件，您可以在此處查看官方文檔

然后，您將不得不使用MaterialCommunityIcons等圖標。 首先在你的抽屜導航器中導入MaterialCommunityIcons這樣

import { MaterialCommunityIcons } from "@expo/vector-icons"; 然后在屏幕導航上添加一個options道具，如圖所示

<Drawer.Screen name={strings.NAV_HOME} component={StackComp}  options={{
          tabBarIcon: ({ color, size }) => (
            <MaterialCommunityIcons name="home" color={color} size={size} />
          ),
        }} />

Answer 2

很高興見到你。 請檢查我的代碼....

const Tab = createBottomTabNavigator();

const Main = () => {
    return (
        <Tab.Navigator
            initialRouteName="Home"
            tabBarOptions={{
                activeTintColor: '#fda039', 
                activeBackgroundColor: 'transparent', 
                labelPosition: 'bottom-icon', 
                tabStyle: styles.tabStyle,
                style: styles.tabBarStyle,
            }}>
            <Tab.Screen name="Home" component={Home}
            options={{
                tabBarIcon: ({ color }) => <TabBarIcon name="home" color={color}/>,
                tabBarLabel: ({ focused, color}) => focused?<Text style={{color: color, marginTop: 5, fontSize: 14}}>Hogar</Text>: null,
              }}
            />
            <Tab.Screen name="QRscan" component={ProfileScreen}
            options={{
                tabBarIcon: ({ color }) => <TabBarIcon name="qr-code-scanner" color={color}/>,
                tabBarLabel: ({ focused, color}) => focused?<Text style={{color: color, marginTop: 5, fontSize: 14}}>QR Scan</Text>: null,
              }}
            />
         <Tab.Screen name="Help" component={Help}
            options={{
                tabBarIcon: ({ color }) => <TabBarIcon name="help" color={color}/>,
                tabBarLabel: ({ focused, color}) => focused?<Text style={{color: color, marginTop: 5, fontSize: 16}}>Ayuda</Text>: null,
              }}
            />
        </Tab.Navigator>
    );

這是我現在使用 React Native navigator 運行的項目代碼。 它使用反應底部導航。

你可以像我一樣重寫代碼。

謝謝你。