首页 文章

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

提问于
浏览 次
6

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

使用this seed使用Angular NativeScript做了类似的事情，它可以在本机应用程序和Web应用程序之间进行代码共享（除了UI层） . 寻找类似于React React Native的东西 .

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

reactjs react-native

5 回答

  • 6

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

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

    请注意对该文章的评论，因为对这种方法的缺陷有一些很好的讨论 . 例：

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

    回复于
  • 2

    我是这样做的 .

    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
}

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

    回复于
  • 5

    是的，绝对可能 . 我们在使用这个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

    回复于
  • 2

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

    回复于
  • -2

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

    回复于

相关问题