Question

我正在尝试创建一个针对Web的本地应用程序，以针对iOS和网络平台进行构建。对于我的问题的解决方案将使xcode / mac Simulator在热重新加载iOS版本的情况下运行，同时也在运行Web版本的“ react-native-web”：“ ^ 0.9.x”应用程序。

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

但是首先，似乎可以立即使用的部分是Web部件。在我的第一次尝试中，运行npx create-react-native-web-app demo-app之后，yarn web立即开始工作。：）

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

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

我需要安装xcode 10.1 commandline tools。
然后，我需要yarn iOS
打开creaternwapp下的ios/项目，然后将 Project Settings>构建系统更改为 Legacy构建系统。
然后我不得不尝试在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的错误。我对此进行了研究，显然，当本机安装未完成时，就会出现这类错误，并且建议使用yarn upgrade本机反应的解决方案。但是yarn upgrade react-native@0.57.8对我没有任何改变。

Answer 1

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

我可以描述如何使Exponative-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”：“反应脚本开始”， “ build-web”：“反应脚本建立”

-我们将作弊并就地编辑它们。更好的做法是将node-modules / react-scripts / config和脚本复制到您的项目文件夹中，安装它们的依赖关系并使它们在本地运行。但这只是一个概念证明（所以..请确保暂时不要重新安装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 ..这本质上只是来自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保存：

从“ react-router-native”导出{NativeRouter作为路由器，交换机，路由，链接}

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

从“ react-router-dom”导出{BrowserRouter作为路由器，交换机，路由，链接}

在这一点上，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,
                },
              }
            },

仅在iOS中出现“未处理的JS异常：找不到变量setTimeout”

1 个答案: