Reactjs 在Web应用程序中使用React Native_Reactjs_React Native_Expo

Reactjs 在Web应用程序中使用React Native

reactjs react-native

Reactjs 在Web应用程序中使用React Native,reactjs,react-native,expo,Reactjs,React Native,Expo,我安装了Expo XDE，并创建了一个新项目funproject。我知道XDE是为设备设计的，我可以连接我的虚拟设备但是，我也希望为web应用程序重用相同的代码库我已将应用程序带到本地主机上的位置这看起来不错，我可以看到index.html页面。它的实际文件路径是 funproject\node\u modules\react native\local cli\server\middleware\index.html 以下是index.html <!DOCTYPE html>

我安装了Expo XDE，并创建了一个新项目

funproject

。我知道XDE是为设备设计的，我可以连接我的虚拟设备

但是，我也希望为web应用程序重用相同的代码库

我已将应用程序带到本地主机上的位置

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

funproject\node\u modules\react native\local cli\server\middleware\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>


自然反应
React Native packager正在运行

所以我为内容和脚本添加了一个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>


自然反应
React Native packager正在运行

我是个新手，但我可以将网络和移动设备集于一身的想法非常诱人。不幸的是，这不起作用！当我使用chrome开发者工具时，app.js的第1行出现了这个错误

未捕获的语法错误：意外的令牌导入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',
  },
});

从“React”导入React；
从“react native”导入{样式表、文本、视图}；
导出默认类App扩展React.Component{
render（）{
返回(
打开App.js开始使用你的应用程序！
);
}
}
const styles=StyleSheet.create({
容器：{
弹性：1，
背景颜色：“#fff”，
对齐项目：“居中”，
为内容辩护：“中心”，
},
});

事实上，你的想法大错特错——全错了

让我们从

但是，我也希望为web应用程序重用相同的代码库

这是错误的，您正在处理的项目是一个本机项目，它使用react的基于组件的呈现逻辑，并为android或iOS生成真正合法的本机ui元素

即使您仍在使用“react”，但这并不意味着您可以在浏览器中重用该应用程序

在手机或模拟器的开发界面或软件包交付和更新系统（packager）中启动的本地服务器（以便通过wifi网络访问）

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

你应该首先理解你使用的技术背后的逻辑

被否决的人是否愿意分享原因？“相同的代码库”并不等于所有代码。事实上，有许多项目将业务逻辑与显示逻辑分开。我不同意那些方法。现在我学到了更多关于npm的知识。但你是对的，这一切都错了。我甚至没有单独使用

react

。我开始关注这个项目。