React Native Drawer Navigator，如何添加图标和图像？

问题描述

所以我刚刚在本机应用程序中创建了一个Drawer Navigator。

现在看起来像这样： IMAGE

现在，我想在文本前后添加前导和尾随图标。

我还想在顶部添加标题图片，在底部添加文本。

我该怎么做？有帮助吗？

这是我的App.js代码：

import 'react-native-gesture-handler';

import * as React from 'react';
import { Button,View,Text,TouchableOpacity,Image } from 'react-native';

import { NavigationContainer } from '@react-navigation/native';
import { createStackNavigator } from '@react-navigation/stack';
import { createDrawerNavigator } from '@react-navigation/drawer';

import FirstPage from './pages/FirstPage';
import SecondPage from './pages/SecondPage';
import ThirdPage from './pages/ThirdPage';

const Stack = createStackNavigator();
const Drawer = createDrawerNavigator();

const NavigationDrawerStructure = (props)=> {
  //Structure for the navigatin Drawer
  const toggleDrawer = () => {
    //Props to open/close the drawer
    props.navigationProps.toggleDrawer();
  };

  return (
    <View style={{ flexDirection: 'row' }}>
      <TouchableOpacity onPress={()=> toggleDrawer()}>
        {/*Donute Button Image */}
        <Image
          source={{uri: 'https://raw.githubusercontent.com/AboutReact/sampleresource/master/drawerWhite.png'}}
          style={{ width: 25,height: 25,marginLeft: 5 }}
        />
      </TouchableOpacity>
    </View>
  );
}

function firstScreenStack({ navigation }) {
  return (
      <Stack.Navigator initialRouteName="FirstPage">
        <Stack.Screen
          name="FirstPage"
          component={FirstPage}
          options={{
            title: 'First Page',//Set Header Title
            headerLeft: ()=> <NavigationDrawerStructure navigationProps={navigation} />,headerStyle: {
              backgroundColor: '#f4511e',//Set Header color
            },headerTintColor: '#fff',//Set Header text color
            headerTitleStyle: {
              fontWeight: 'bold',//Set Header text style
            },}}
        />
      </Stack.Navigator>
  );
}

function secondScreenStack({ navigation }) {
  return (
    <Stack.Navigator initialRouteName="SecondPage">
        <Stack.Screen
          name="SecondPage"
          component={SecondPage}
          options={{
            title: 'Second Page',}}
        />
      </Stack.Navigator>
  );
}

function thirdScreenStack({ navigation }) {
  return (
    <Stack.Navigator initialRouteName="ThirdPage">
        <Stack.Screen
          name="ThirdPage"
          component={ThirdPage}
          options={{
            title: 'Third Page',}}
        />
      </Stack.Navigator>
  );
}

function App() {
  return (
    <NavigationContainer>
      <Drawer.Navigator
        drawerContentOptions={{
          activeTintColor: '#e91e63',itemStyle: { marginVertical: 5 },}}>
        <Drawer.Screen
          name="FirstPage"
          options={{ drawerLabel: 'First page Option' }}
          component={firstScreenStack} />
        <Drawer.Screen
          name="SecondPage"
          options={{ drawerLabel: 'Second page Option' }}
          component={secondScreenStack} />
        <Drawer.Screen
          name="ThirdPage"
          options={{ drawerLabel: 'Third page Option' }}
          component={thirdScreenStack} />
      </Drawer.Navigator>
    </NavigationContainer>
  );
}

export default App;

如果有人帮助我，将非常感激：）

解决方法

为此，您必须为抽屉创建一个自定义组件，然后借助this之类的“ drawerContent”道具将其传递给抽屉导航器。

此处example