Это не ответ, который я искал , я бы хотел, чтобы create-реакции-native-web-приложение работало "из коробки" ... но сейчас - вот как я использую rn+ rnw, даже с реактивной бумагой:
Я могу описать, как заставить реактивную бумагу работать на выставке.
expo init --yarn --template blank demo-app
- cd demo-app
yarn add react-native-web react-router-dom react-router-native react-app-polyfill react-art react-native-paper react-dom - yarn add -D react-scripts @babel/preset-flow @babel/plugin-proposal-class-properties
code package.json и добавьте сценарии:
"web": "response-scripts start", "build-web": "response-scripts build"
- мы собираемся обманывать и редактировать их на месте.Лучше всего скопировать в папку вашего проекта узлы-модули / реагировать-скрипты / конфигурации и скрипты, установить их зависимости и заставить их работать локально.Но это всего лишь подтверждение концепции (так что ... просто убедитесь, что пока не переустанавливаете node_modules или реакции-скрипты)
- настройка / добавление main:
"main":" response-native-main.js ",
code react-native-main.js сохранение:
import { KeepAwake, registerRootComponent } from 'expo'
import App from './src/App'
if (__DEV__) {
KeepAwake.activate()
}
registerRootComponent(App)
mkdir src public
rm App.js
- code src/App.js экономия:
import React from 'react'
import { StyleSheet, View } from 'react-native'
import { Provider as PaperProvider } from 'react-native-paper'
import { Router, Switch, Route } from './routing'
import Home from './Controllers/Home'
export default class App extends React.Component {
render () {
return (
<PaperProvider>
<View style={styles.app}>
<Router>
<Route exact path="/" render={props => <Home {...props} />} />
</Router>
</View>
</PaperProvider>
)
}
}
const styles = StyleSheet.create({
app: {
flex:1
}
})
mkdir src/Controllers && code src/Controllers/Home.js сохранение: (нужно что-то сделать для демонстрационной бумаги .. по сути это просто текстовый пример из папки примеров)
/* @flow */
import React from 'react'
import { View, StyleSheet, Platform } from 'react-native'
import {
Caption,
Headline,
Paragraph,
Subheading,
Title,
withTheme,
type Theme,
} from 'react-native-paper'
type Props = {
theme: Theme,
};
class TextExample extends React.Component<Props> {
render() {
const {
theme: {
colors: { background },
},
} = this.props
return (
<View style={[styles.container, { backgroundColor: background }]}>
<Caption style={styles.text}>Home</Caption>
<Paragraph style={styles.text}>This is the home component</Paragraph>
<Subheading style={styles.text}>home component</Subheading>
<Title style={styles.text}>Home</Title>
<Headline style={styles.text}>Home on { Platform.OS }</Headline>
</View>
)
}
}
const styles = StyleSheet.create({
container: {
padding: 16,
flex: 1,
},
text: {
marginVertical: 4,
},
})
export default withTheme(TextExample)
code public/index.html сохранение:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Third Party Demo</title>
</head>
<body>
<div id="react-native-web-app"></div>
</body>
</html>
code src/index.js сохранение:
import React from 'react'
import ReactDom from 'react-dom'
import App from './App'
ReactDom.render(<App />, document.getElementById('react-native-web-app'))
code src/routing.native.js сохранение:
экспорт {NativeRouter как Маршрутизатор, Коммутатор, Маршрут, Соединение} из 'Reaction-router-native'
- code src/routing.web.js Сохранение:
export {BrowserRouter как Маршрутизатор, Коммутатор, Маршрут, Соединение} из'act-router-dom '
на данный момент
yarn ios должно работать, но
yarn web выдает ошибку, о которой здесь сообщают.Нам нужно отредактировать конфиг веб-пакета activ-scripts
node_modules/react-scripts/config/webpack.config.js:
- для плагинов раздела, помеченного:
// Process application JS with Babel.
// The preset includes JSX, Flow, TypeScript, and some ESnext features.
(прио строке 387) добавьте этот плагин:
[
"@babel/plugin-proposal-class-properties",
{
"loose": false
}
]
после этого раздела создайте новый раздел:
// Process paper specially
{
test: /\.js$/,
exclude: /node_modules(?!\/react-native-paper|\/react-native-vector-icons)/,
use: {
loader: require.resolve('babel-loader'),
options: {
babelrc: false,
configFile: false,
compact: false,
presets: [
'@babel/preset-env',
'@babel/preset-react',
'@babel/preset-flow',
],
cacheDirectory: true,
plugins: [
[
"@babel/plugin-proposal-class-properties",
{
"loose": false
}
],
],
// Don't waste time on Gzipping the cache
cacheCompression: false,
// If an error happens in a package, it's possible to be
// because it was compiled. Thus, we don't want the browser
// debugger to show the original code. Instead, the code
// being evaluated would be much more helpful.
sourceMaps: false,
},
}
},