React Native и веб-пакет ⇐ IOS

[Anonymous]

Давненько я не занимался веб-программированием. Я попытался создать простое приложение с помощью React Native. Как только я начал, я задался вопросом, как я могу просмотреть приложение в браузере. Некоторое обучение в LLM привело меня к комбинации webpack и response-native-web.
По сути, у меня есть базовая папка, в которой находится мой ios >, android и папка web. В веб-папке у меня есть файлы index.html и index.js.
Вот их содержимое:
index.html

Код: Выделить всё

React Native Web

/* These styles make the body full-height */
html,
body {
height: 100%;
}
/* These styles disable body scrolling if you are using  */
body {
overflow: hidden;
}
/* These styles make the root element full-height */
#root {
display: flex;
height: 100%;
}

index.js

Код: Выделить всё

// web/index.js
import { AppRegistry } from 'react-native';
import App from '../App';
import {name as appName} from './app.json';

AppRegistry.registerComponent(appName, () => App);
AppRegistry.runApplication(appName, {
rootTag: document.getElementById("root")
});

Мой файл webpack.config.js выглядит так:

Код: Выделить всё

const path = require('path');

module.exports = {
entry: './web/index.js',
output: {
publicPath: path.resolve(__dirname, 'web'),
path: path.resolve(__dirname, 'dist'),
filename: 'bundle.js',
},
module: {
rules: [
{
test: /\.(js|jsx)$/,
exclude: /node_modules/,
use: {
loader: 'babel-loader',
},
},
{
test: /\.css$/,
use: ['style-loader', 'css-loader'],
},
{
test: /\.(jpe?g|png|gif|svg)$/i,
loader: 'file-loader',
options: {
name: '/public/icons/[name].[ext]'
}
}
],
},
resolve: {
alias: {
'react-native$': 'react-native-web',
},
extensions: ['.web.js', '.js', '.jsx'],
},
devServer: {
static: {
directory: path.join(__dirname, 'web'),
},
compress: true,
port: 9000,
},
};

Вот мой App.js

Код: Выделить всё

// App.js
import React from 'react';
import { NavigationContainer } from '@react-navigation/native';
import { createStackNavigator } from '@react-navigation/stack';
import HomeScreen from './screens/HomeScreen';
import CreatePostScreen from './screens/CreatePostScreen';
import LoginScreen from './screens/LoginScreen';

const Stack = createStackNavigator();

function App() {
return (







);
}

export default App;

Когда я запускаю веб-пакет с помощью webpackserve --mode development --open, я получаю пустую HTML-страницу. Кажется, мое настоящее приложение никогда не инициализируется. Единственная ошибка, которую я вижу в консоли веб-пакета:

Код: Выделить всё

WARNING in ./node_modules/react-native-screens/lib/module/components/ScreenStackItem.js 36:183-198
export 'FooterComponent' (imported as 'FooterComponent') was not found in './ScreenFooter' (possible exports: default)
@ ./node_modules/react-native-screens/lib/module/index.js 19:0-74 19:0-74
@ ./node_modules/@react-navigation/stack/lib/commonjs/views/Screens.js 14:12-43
@ ./node_modules/@react-navigation/stack/lib/commonjs/views/Stack/CardStack.js 15:15-39
@ ./node_modules/@react-navigation/stack/lib/commonjs/views/Stack/StackView.js 15:17-42
@ ./node_modules/@react-navigation/stack/lib/commonjs/index.js 61:17-54
@ ./App.js 1:274-308
@ ./web/index.js 1:156-173

Но это всего лишь предупреждение, не так ли?

Подробнее здесь: https://stackoverflow.com/questions/792 ... nd-webpack