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

问题描述：

我安装了Expo XDE，并创建了一个新项目funproject。我知道XDE是用于设备的，我可以连接我的虚拟设备。在Web应用程序中使用React-Native

但是，我也想重复使用相同的代码基地为Web应用程序。

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

http://localhost:19001/

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

funproject\node_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>

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

Uncaught SyntaxError: Unexpected token import app.js:1

的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', 
    }, 
});

能下降的人，关心分享为什么？ –

答

你有它大多是错的，其实 - 都是错的。

让我们开始吧;

However, I would also like to reuse the same code base for a web application.

因此，这是不对的，你从事的项目是土生土长的项目，该项目采用的反应基于组件的渲染逻辑，并产生对Android或iOS真实合法的原生UI元素。

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

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

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

You should first understand the logic behind tech you are using; https://facebook.github.io/react-native/docs/getting-started.html

“相同的代码库”并不等于所有的代码。实际上有很多项目将业务逻辑从显示逻辑中分离出来。我不知道这些方法。现在我已经学到了更多关于'npm'的知识。但你是对的，这是错的。我甚至没有正确使用“反应”。我开始关注这个项目。 http://jkaufman.io/react-web-native-codesharing/ –

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

相关推荐