React Native Expo 导航抽屉图标未显示在 Firebase 部署环境中

Question

我正在使用导航抽屉创建侧边栏菜单。在本地运行时它呈现良好，但将其部署到谷歌服务器时 - https://cancer-hacked.web.app/ - 屏幕左上角的导航菜单图标不显示。查看谷歌服务器上的源代码，没有我本地环境中的 img 标签。

本地应用程序 -

Firebase 部署的应用程序 -

这是我的主应用程序文件 - index.js

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

import CancerHomepageWebWrapper from './CancerHomepageWebWrapper';
import ChemoHomepageWebWrapper from './ChemoHomepageWebWrapper';
import GeneHomepageWebWrapper from './GeneHomepageWebWrapper';

const Drawer = createDrawerNavigator();

export default function App() {
  return (
    <NavigationContainer>
      <Drawer.Navigator initialRouteName="Cancer">
        <Drawer.Screen name="Cancer" component={CancerHomepageWebWrapper} />
        <Drawer.Screen name="Chemo" component={ChemoHomepageWebWrapper} />
        <Drawer.Screen name="Gene" component={GeneHomepageWebWrapper} />
      </Drawer.Navigator>
    </NavigationContainer>
  );
}

还有我的部署脚本

npx expo export -p web
mv dist/index.html src/main/www/index.html
mv dist/metadata.json src/main/www/
mv dist/favicon.ico src/main/www/
rm -rf src/main/www/assets
mv dist/assets src/main/www/assets
rm -rf src/main/www/_expo
mv dist/_expo src/main/www/_expo
firebase deploy

Answer 1

我的 Firebase 部署中显示了侧栏图标。我能够覆盖侧栏菜单图标上的图像标签，提供 src/main/www/images/toogle-drawer-icon.png 的路径。我的主应用程序文件 index.js 现在看起来像这样：

import { Image, TouchableOpacity, View } from 'react-native';
import { NavigationContainer } from '@react-navigation/native';
import { createDrawerNavigator } from '@react-navigation/drawer';
import { useNavigation } from '@react-navigation/native';

import CancerHomepageWebWrapper from './CancerHomepageWebWrapper';
import ChemoHomepageWebWrapper from './ChemoHomepageWebWrapper';
import GeneHomepageWebWrapper from './GeneHomepageWebWrapper';

const Drawer = createDrawerNavigator();

const CustomHeader = () => {
  const navigation = useNavigation();
  return (
    <View style={{ flexDirection: 'row', alignItems: 'center' }}>
      <TouchableOpacity onPress={() => navigation.toggleDrawer()}>
        <Image
          source={require('./images/toggle-drawer-icon.png')}
          style={{ width: 30, height: 30 }}
        />
      </TouchableOpacity>
    </View>
  );
};

export default function App() {
  return (
    <NavigationContainer>
      <Drawer.Navigator  initialRouteName="Cancer" screenOptions={{
               headerLeft: (props) => <CustomHeader/>
         }}>
        <Drawer.Screen name="Cancer" component={CancerHomepageWebWrapper} />
        <Drawer.Screen name="Chemo" component={ChemoHomepageWebWrapper} />
        <Drawer.Screen name="Cancer Genes" component={GeneHomepageWebWrapper} />
      </Drawer.Navigator>
    </NavigationContainer>
  );
}