Question

我安装了Expo XDE，并创建了一个新项目funproject。我知道XDE适用于设备，我可以连接我的虚拟设备。

但是，我还想为Web应用程序重用相同的代码库。

我已经在应用程序应该在我的本地主机上的位置。

http://localhost:19001/

这看起来不错，我可以看到index.html页面。它的实际文件路径是。

funproject \ node_modules \反应天然\本地CLI \服务器\中间件\ index.html的

以下是index.html

的内容

<!DOCTYPE html>
<html>
<head>
  <title>React Native</title>
</head>
<body>
  <p>React Native packager is running.</p>
  <p><a href="http://facebook.github.io/react-native/">Visit documentation</a></p>
</body>
</html>

所以我为内容和脚本添加了一个div，app.js

<!DOCTYPE html>
<html>
<head>
  <title>React Native</title>
</head>
<div id="content"></div>
<body>
  <p>React Native packager is running.</p>
  <p><a href="http://facebook.github.io/react-native/">Visit documentation</a></p>
</body>
</html>
<script type="text/javascript" src="../app.js"></script>

我是新手做出反应，但我可以将网络和移动设备集中在一起的想法非常诱人。不幸的是，这不起作用！当我使用chrome开发人员工具时，我收到了app.js第1行的错误

未捕获的SyntaxError：意外的令牌导入app.js：1

这是默认生成的app.js

import React from 'react';
import { StyleSheet, Text, View } from 'react-native';

export default class App extends React.Component {
  render() {
    return (
      <View style={styles.container}>
        <Text>Open up App.js to start working on your app!</Text>
      </View>
    );
  }
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: '#fff',
    alignItems: 'center',
    justifyContent: 'center',
  },
});

Answer 1

你真的错了，实际上 - 都错了。

让我们开始;

但是，我还想为Web应用程序重用相同的代码库。

所以这是错误的，你正在研究的项目是一个原生项目，它使用基于组件的反应渲染逻辑，并为android或iOS生成真正合法的原生ui元素。

即使您仍在使用＆＃34;反应＆＃34;这并不意味着您可以在浏览器中重复使用该应用。

在您的手机或模拟器的开发界面或包裹递送和更新系统（打包器）中启动的本地服务器（为了通过wifi网络访问它）。

该服务器及其上下文只是一个开发工具。

您应该首先了解您正在使用的技术背后的逻辑; https://facebook.github.io/react-native/docs/getting-started.html

将React-Native与Web应用程序一起使用

1 个答案: