仅在 iOS 中"Unhandled JS Exception: Can't find variable setTimeout"

我正在尝试创建一个用于web应用程序的本地react，以便为iOS和web平台构建。我的问题的解决方案将使xcode/mac模拟器在运行"react native web"："^0.9.x"应用程序的iOS版本的热重新加载的同时，也运行web版本。

我在谷歌上搜索了如何启动其中一篇，发现前几篇文章都是由create-rect原生网络应用程序的创建者撰写的，所以我决定尝试这种方法。然而，这是一场艰苦的战斗。

但首先，似乎开箱即用的部分是web部分。在我的第一次尝试中，运行npx create-react-native-web-app demo-app后，yarn web立即工作。：)

但yarn iOS无法构建，并且存在多个问题。

我有node -v >> v11.5.0。我在Mohave上，xcode 10.1已经设置好了(用于iOS开发)。

不过我需要安装xcode 10.1命令行工具
然后，我需要yarn iOS
然后在ios/下打开creaternwapp项目，并将项目设置>生成系统更改为传统生成系统
然后我不得不尝试在xcode中构建它(事实证明这很重要，即使构建会失败)
然后，(cd node_modules/react-native/third-party/glog-0.3.4/ && ./configure)//这些数字可能会明显变化，具体取决于安装情况

无论我是否需要，我都将.babelrc从：更改为

{
"presets": ["module:metro-react-native-babel-preset"],
}

到：

{
"presets": [["module:metro-react-native-babel-preset"], ["react-app"]],
"ignore": ["node_modules/art/core/color.js"],
"plugins": [
["module-resolver", {
"alias": {
"^react-native$": "react-native-web"
}
}]
],
}

然后：npm install && npm audit fix，然后用yarn install，这样纱线就可以恢复控制

此时yarn ios成功，但模拟器上显示setTimeout的错误。我对此进行了研究，很明显，当react本机安装没有完成时，就会发生这种错误，建议使用yarn upgradereact本程序的解决方案。但yarn upgrade react-native@0.57.8对我来说没有任何改变。

这不是我想要的答案，我很乐意创建react原生web应用程序来开箱即用。。但现在，我是如何使用rn+rnw的，即使是使用react原生纸张：

我可以描述一下如何在世博会上获得本土论文。

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"："启动反应脚本"，"构建web"："反应脚本构建">

我们将作弊并对其进行适当的编辑。更好的做法是将节点模块/react-scripts/config和脚本复制到您的项目文件夹中，安装它们的依赖项并使它们在本地工作。但这只是一个概念证明(所以……只是确保现在不要重新安装node_modules或react脚本)

--配置/添加主：

"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保存：(需要制作一些演示文件……这实际上只是examples文件夹中的文本示例)

/* @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 as Router，Switch，Route，Link｝

--code src/routing.web.js保存：

从"react Router dom"导出｛BrowserRouter as Router，Switch，Route，Link｝

此时，yarn ios应该工作，但yarn web给出了此处报告的错误。我们需要编辑react脚本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,
},
}
},

相关内容

最新更新

热门标签：