这不是我一直在寻找的答案，我希望 create-react-native-web-app 开箱即用.. 但是现在 - 这是我使用 rn + rnw 的方式，即使使用 react-native-纸：
我可以描述如何让 react-native-paper 在博览会中工作。
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": "react-scripts start", "build-web": "react-scripts build"
——我们将作弊并就地编辑它们。更好的做法是将 node-modules/react-scripts/ 配置和脚本复制到您的项目文件夹中，安装它们的依赖项并让它们在本地工作。但这只是一个概念验证（所以..现在请确保不要重新安装 node_modules 或 react-scripts）
-- 配置/添加主要：
"main": "react-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保存：（需要做一些东西来演示 Paper .. 这基本上只是示例文件夹中的文本示例）
/* @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保存：
export { NativeRouter as Router, Switch, Route, Link } from 'react-router-native'
--code src/routing.web.js保存：
从 'react-router-dom' 导出 { BrowserRouter as Router, Switch, Route, Link }
- 此时，
yarn ios应该可以工作，但yarn web会给出此处报告的错误。我们需要编辑 react-scripts Webpack 配置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,
},
}
},