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

Question

我正在尝试创建一个 react-native-for-web 应用程序来构建 iOS 和网络平台。我的问题的解决方案将获得 iOS 版本的 xcode/mac 模拟器运行热重载，同时运行网络版本 "react-native-web"：“ ^0.9.x" 应用程序.

我在谷歌上搜索了如何启动其中一个，发现前几篇文章是由 create-react-native-web-app 的创建者撰写的，所以我决定尝试这种方法。然而，这是一场艰苦的战斗。

但首先，似乎开箱即用的部分是 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 commandline tools。
然后，我需要yarn iOS
然后打开 ios/ 下的 creaternwapp 项目并将 Project Settings > Build System 更改为 Legacy Build System。
然后我不得不尝试在 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 就可以重新获得控制权。

此时 yarn ios 成功，但 setTimeout 的错误显示在模拟器上。我对此进行了研究，显然当 react-native 安装未完成时会发生此类错误，建议使用 yarn upgrade react native 的解决方案。但是 yarn upgrade react-native@0.57.8 对我来说没有任何改变。

Answer 1

这不是 我一直在寻找的答案，我希望 create-react-native-web-app 开箱即用..但现在 -这是我使用 rn + rnw 的方式，即使使用 react-native-paper:

我可以描述如何让 react-native-paper 在 expo 中工作。

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）

-- configure/add 主要:

"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 节省：

export { BrowserRouter as Router, Switch, Route, Link } from 'react-router-dom'

此时，yarn ios应该可以工作，但yarn web给出了此处报告的错误。我们需要编辑 react-scripts Webpack 配置 node_modules/react-scripts/config/webpack.config.js:

-- 到标记为

的部分的 plugins

            // 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,
                },
              }
            },

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

"Unhandled JS Exception: Can't find variable setTimeout" in iOS only

ios

reactjs

react-native

react-native-ios

react-native-web