在 React Web 和 原生 App 中共享代码

本文讲的是一种在 React Web 和 React Native 共享应用程序逻辑,但在每个平台保持独立的渲染特性的方法。

应用

React Native:

React Web:

这个应用程序本身是一个非常简单的 Hello World 应用程序。它不仅会显示"Hello World"，而且当你点击它时,颜色会从红色改变成蓝色!哇!

动机

不管是 Web 还是 Mobile, React 都是很棒的。 所以为什么不在你的两个实现之间共享代码?

React Native 并不是为了实现"一次编写，到处运行"的框架。Facebook 一直称之为"一次学习，到处编写"的框架-这就是说你需要为你的平台进行定制。即便这样，你仍然可以在应用程序之间共享大量的逻辑。

在这篇文章我将讨论如何吸取这两种思想的优点,达到一个融合共通的状态。在坚持每个平台定制呈现方式的同时，我们会共享所有应用程序逻辑。

我们会假设你已经具备以下知识: React, React Native 和 Redux。

初始安装 + 目录概述

首先我们需要初始化我们的项目。我们要按照取决于 Facebook 的入门指南 中的步骤 ︰

$ npm install -g react-native-cli

$ react-native init ReactNativeWebHelloWorld

现在，我们的目录看起来是这样:

ReactNativeWebHelloWorld

|-- android

|-- ios

|-- node_modules

|-- .flowconfig

|-- .gitignore

|-- .watchmanconfig

|-- index.android.js

|-- index.ios.js

+-- package.json

这包含我们需要为我们的 iOS 和 Android 应用程序的所有文件。现在，我们创建下列目录和文件来配置和运行我们的 Web 应用程序 ︰

ReactNativeWebHelloWorld

+-- web

|-- public

| +-- index.html

+-- webpack

|-- web.dev.config.js

+-- web.prod.config.js

index.html， web.dev.config.js 和 web.prod.config.js 的内容都可以在 GitHub 上找到 - 我们会更晚些时候分析他们 (但如果你现在就想点击他们,那就点吧!)。

当我们改好目录结构后，接着安装依赖项:

$ npm install --save babel babel-polyfill ...

$ npm install --save-dev autoprefixer babel-core ...

依赖项的完整列表，请查阅 package.json。

最后，我们为应用程序初始化的所有文件。我们将会做一个相当通用的 React/Redux 应用程序 ︰

ReactNativeWebHelloWorld

+-- app

|-- actions

|-- constants

|-- reducers

|-- store

|-- native

| |-- components

| |-- containers

| +-- style

+-- web

|-- components

|-- containers

+-- style

这时候就已经相当清晰了。我们为不同的应用程序有三个不同的入口点 ︰ index.ios.js、 index.android.js 和 app/web/index.js。IOS 和 Android 的入口文件从app/native载入组件和容器， web 入口文件从 app/web 载入组件和容器。这给我们带来我们了:

应用程序代码结构

我不会去分析所有的文件，但要指出一些 Web 和 Native 的关键差异。

让我们看看应用程序入口文件,index.ios.js 看起来是这样:

import React, { Component, AppRegistry } from 'react-native';

import Root from './app/native/containers/Root';

import configureStore from './app/store/configureStore.prod.js';

const store = configureStore();

class ReactNativeHelloWorld extends Component {

render() {

return (

);

}

}

AppRegistry.registerComponent('ReactNativeWebHelloWorld', () => ReactNativeHelloWorld);

app/web/index.js 是这样:

import React from 'react';

import { render } from 'react-dom';

import Root from './containers/Root';

import configureStore from '../store/configureStore';

// load our css

require('./styles/style.less');

const store = configureStore();

const rootElement = document.getElementById('root');

render( , rootElement );

所以我们关心的区别是什么？

需要注意的主要事情是顶级组件如何渲染他们自己。在 Native 部分，我们必须在 app registry 中显式定义，而在 web 中我们可以使用 ReactDom，把Root直接渲染在根元素中。

那是什么意思!?

基本上，React Native 和 React Web 在实例化顶级组件上有着不同的方式。

正是这些差异，要求我们坚持每个平台独特的渲染逻辑。

让我们也检查两种情况下HelloWorld组件的render方法。在 Native 中，它看起来是这样:

render() {

const { onPress, color } = this.props;

const style = StyleSheet.create({

helloWorld: { color: color, textAlign: 'center' }

});

return (

Hello World

);

}

Web 中，它看起来是这样:

render() {

const { onClick, color } = this.props;

return (

Hello World

);

}

这就又证明了为什么我们需要坚持每个平台独特的渲染逻辑。 React Native 处理 s 和s ，而 web 处理