React导航不适用于React Native Web

问题描述

@H_502_0@我的问题是使用@ react-navigation / stack在网络上显示我的组件时，什么都没显示出来。但是，检查页面时，我确实看到dom元素在浏览器中什么也没有呈现。我期望发生的事情是，当我将OnboardingScreen组件传递给它会在浏览器中呈现的screens组件prop时，因为我已经安装并配置了响应本机Web。该代码可以在移动设备上完美地运行，而不能在Web上运行，我认为错误是在我的webpack配置中，或者没有正确地将组件链接到其路由。另外，该网络应用程序不使用我从头开始创建该网络应用程序的创建反应应用程序

@H_502_0@ 我尝试不带任何导航的情况下导入我的组件，并且该组件呈现在页面上，但是仅当我将组件传递给导航器时，屏幕组件prop才不再显示还尝试传递其他组件，并且该组件也不会显示在浏览器上。尝试从导航容器或导航器中删除所有道具，结果相同。

@H_502_0@我已经坚持了一段时间，所以任何帮助将不胜感激！

@H_502_0@这里是要呈现的内容以及我的链接配置：

@H_502_0@ AppView.tsx

 const CONfig = {
    onboarding: '/onboarding',};

  const linking = {
    config: CONfig,prefixes: ['http://localhost:8080'],};

const MainStack = createStackNavigator();

 return (
    <SafeAreaProvider>
      <ThemeProvider theme={!isDarkTheme ? LIGHT_THEME : DARK_THEME}>
        <NavigationContainer
          theme={true ? navigationTheme.light : navigationTheme.dark}
          linking={linking}
          onStateChange={() => handleNavigationChange()}
          ref={navigation}>
          <SafeAreaContainer>
            <MainStack.Navigator
              initialRouteName="onboarding"
              screenoptions={{gestureEnabled: false}}
              headerMode={'none'}>
              <MainStack.Screen
                name="onboarding"
                component={OnboardingScreen}
              />
            </MainStack.Navigator>
          </SafeAreaContainer>
        </NavigationContainer>
      </ThemeProvider>
    </SafeAreaProvider>
  );

@H_502_0@我的webpack.config.js：

const path = require('path');
const webpack = require('webpack');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const RULES = require('./webpack.rules');
const rootDir = path.join(__dirname,'..');
const webpackEnv = process.env.NODE_ENV || 'development';
const node_modules = path.resolve(__dirname,'..','node_modules');

module.exports = {
  mode: webpackEnv,entry: {
    app: path.join(rootDir,'./index.web.ts'),},output: {
    path: path.resolve(rootDir,'dist'),filename: 'app-[hash].bundle.js',devtool: 'source-map',module: {
    rules: RULES,devServer: {
    historyApiFallback: {disableDotRule: true},plugins: [
    new webpack.DefinePlugin({
      __DEV__: process.env.NODE_ENV !== 'production',}),new HtmlWebpackPlugin({
      template: path.join(__dirname,'./index.html'),filename: './index.html',new webpack.HotModuleReplacementPlugin(),],resolve: {
    extensions: [
      '.web.tsx','.web.ts','.tsx','.ts','.web.jsx','.web.js','.jsx','.js',alias: Object.assign({
      'react-native$': 'react-native-web','react-native-maps': 'react-native-web-maps','react-native-web': path.resolve(node_modules,'react-native-web'),'@react-navigation/native': path.resolve(
        __dirname,'../node_modules/@react-navigation/native',),'@react-navigation/stack': path.resolve(
        __dirname,'../node_modules/@react-navigation/stack',)
  }),};

@H_502_0@ webpack.rules.js

module.exports = [
  {
    test: /\.(ts|tsx)$/,loader: 'ts-loader',exclude: /node_modules/,{
    test: /\.(js|jsx)$/,exclude: /node_modules\/(?!(react-native-vector-icons|react-native-reanimated|react-native-dotenv|react-native-gesture-handler|react-native-awesome-card-io)\/).*/,use: {
      loader: 'babel-loader',options: {
        babelrc: false,configFile: false,presets: [
          'module:metro-react-native-babel-preset','module:react-native-dotenv','@babel/preset-env','@babel/preset-flow','@babel/preset-typescript',plugins: [
          '@babel/plugin-proposal-class-properties','@babel/plugin-proposal-object-rest-spread',{
    enforce: 'pre',test: /\.js$/,loader: 'source-map-loader',}]

解决方法

暂无找到可以解决该程序问题的有效方法，小编努力寻找整理中！

如果你已经找到好的解决方法，欢迎将解决方案带上本链接一起发送给小编。

小编邮箱:dio#foxmail.com (将#修改为@）

react-native react-native-web react-navigation react-navigation-stack webpack webpack webpack