Question

是否可以设置一个包含React Native（移动应用程序）+ React（web）代码的项目，除了UI部分之外，平台之间的代码可以粉碎。

使用this seed使用Angular + NativeScript做了类似的事情，这使得本机应用程序和Web应用程序之间的代码共享成为可能（除了UI层）。寻找类似于React + React Native的东西。

如果您知道React Native + Angular的任何此类种子，请分享（如果有）。

Answer 1

Jonathan Kaufman有一篇关于如何设置的好文章：http://jkaufman.io/react-web-native-codesharing/

基本策略是为每个平台（android / ios / web）设置不同的入口点（index.js）。然后，大多数非呈现代码都可以存在于共享的app或common文件夹中。您仍然需要隔离渲染代码（即使用View，div等），因为平台会有所不同。

同时注意对该文章的评论，因为对这种方法的缺陷进行了一些很好的讨论。例如：

通过在本机和网络之间共享一个公共的package.json，你可以通过它们的共同依赖关系将它们粘合在一起，最重要的一个是反应。我们假设您升级到依赖于＆gt; = react @ 16的react-native版本，但您的Web应用程序依赖于依赖于=＆lt;的其他库。反应4015。 --timtas

Answer 2

您可以尝试React-Native-Web，但是您应该创建2个不同的项目，隔离和复制可以在两者上使用的项目（如api请求和util函数）。您的代码将更易于调试和维护。

Answer 3

是的，绝对可能。我们在使用这个lib react-native-web之前已经完成了。 https://github.com/necolas/react-native-web

在index.ios.js和index.android.js旁边，您需要创建index.web.js，内容应该与此类似。

import { AppRegistry } from 'react-native';
import App from './app/Containers/App/App.container';

AppRegistry.registerComponent('ReactNativeWeb', () => App);
AppRegistry.runApplication('ReactNativeWeb', { rootTag: document.getElementById('react-app') });

您还需要创建自己的nodejs代码来提供捆绑包。 full reference

Answer 4

我是这样做的。

1）创建一个React Native项目 2）将react-dom和react-scripts依赖项添加到package.json并安装它们 3）所有组件代码都以这种方式分开：

我的常规React Native组件：

// MyComponent.js
class MyComponent extends React.Component {
    costructor(props) {
        ...
    }
    someMethod() {
        ...
    }
    render() {
        return (
            <View>
                ...
            </View>
        )
    }
}

更改为在网络中使用：

// MyComponentController.js
class MyComponentController extends React.Component {
    costructor(props) {
        ...
    }
    someMethod() {
        ...
    }
}

// MyComponent.js
const MyComponentController = require('./MyComponentController')
class MyComponent extends MyComponentController {
    render() {
        return (
            <div>
                ...
            </div>
        )
    }
}

// MyComponent.native.js
const MyComponentController = require('./MyComponentController')
class MyComponent extends MyComponentController {
    render() {
        return (
            <View>
                ...
            </View>
        )
    }
}

然后我在所有平台中使用它：

const MyComponent = require('./MyComponent')

为了能够很好地处理旧项目，我必须实现一些假人，但这一切都可以通过你自己的抽象层来做得更好。我的一部分例子：

const ReactNative = {
    Platform: {
        OS: 'web'
    },
    AppRegistry: {
        registerComponent: (name, provider) => {
            const Component = provider()
            ReactDOM.render(
              <Component />,
              document.getElementById('root')
            );
        }
    },
    AsyncStorage: {
        setItem: (key, value, callback) => {
            localStorage.setItem(key, value)
            callback()
        },
        getItem: key => {
            const val = localStorage.getItem(key) || null
            return new Promise(ok => ok(val))
        }
    },
    StyleSheet: {
        create: dict => dict
    },
    Dimensions: {
        get: function() {
            // http://stackoverflow.com/questions/3437786/get-the-size-of-the-screen-current-web-page-and-browser-window
            const w = window
            const d = document
            const e = d.documentElement
            const g = d.getElementsByTagName('body')[0]
            const x = w.innerWidth || e.clientWidth || g.clientWidth
            const y = w.innerHeight|| e.clientHeight|| g.clientHeight
            return {
                width: x,
                height: y
            }
        }
    },
    Linking: {
        openURL: (url) => {
            window.open(url)
        }
    },
    // etc, I add dummies as soon as I need them
}

但是，正如我所说，这是必要的，因为我没有太多时间，也没有事先知道我必须移植到网上。

Answer 5

您可以尝试我尝试准备的存储库：

https://mehmetkaplan.github.io/react-spa-jwt-authentication-boilerplate/

这有一个分步指南，可以在React和React Native应用程序之间共享通用逻辑。

它旨在仅在表示层上进行区分。除此之外，所有逻辑都被编译为在应用程序之间共享。

它还带有Facebook和Google登录名，数据库（mysql）集成，WebView任务生成等。

它还提供了有关“单页应用程序”，“基于JWT（json网络令牌）的安全性”等方面的基本知识。

阅读自述文件后，您只需克隆存储库并设置环境（数据库），然后就可以在共享代码结构和安全基准之上开始开发业务逻辑。

Answer 6

您可以创建3个独立应用程序 - React，React-native＆amp;服务器。 React＆amp; React-native将使用后端应用程序中的相同服务。另外，使用单个应用程序，在加载主页时，应用程序将了解设备并根据设备呈现React / React-native代码。

React Native + React（针对web）种子项目

6 个答案: