如何使用node.js管理公共代码 - 对于react-native透视图

时间:2016-03-25 15:09:08

标签: node.js npm react-native

之前我认为Private Sub Worksheet_Change(ByVal Target As Range) If Target.Address = "$M$5" Then Call Complete5 End If If Target.Address = "$M$6" Then Call Complete6 End If End Sub Sub Complete5() ActiveSheet.Unprotect Password:="unlock" If InStr(1, Range("$M$5"), "Completed") > 0 Then Range("$Y$5").Select ActiveCell.FormulaR1C1 = "=NOW()" ActiveCell.Select Selection.Copy Selection.PasteSpecial Paste:=xlPasteValues, Operation:=xlNone, SkipBlanks _ :=False, Transpose:=False Application.CutCopyMode = False Range("$M$5").Select Else Range("$Y$5").Select ActiveCell.ClearContents Range("$M$5").Select End If End Sub Sub Complete6() ActiveSheet.Unprotect Password:="unlock" If InStr(1, Range("$M$6"), "Completed") > 0 Then Range("$Y$6").Select ActiveCell.FormulaR1C1 = "=NOW()" ActiveCell.Select Selection.Copy Selection.PasteSpecial Paste:=xlPasteValues, Operation:=xlNone, SkipBlanks _ :=False, Transpose:=False Application.CutCopyMode = False Range("$M$6").Select Else Range("$Y$6").Select ActiveCell.ClearContents Range("$M$6").Select End If End Sub 的目标之一是能够在多个平台上重复使用大量代码。我读的越多,似乎不是这种情况(或主要案例之一)。我想要实现的是一个项目结构,如:

react-native

其中project +- app +- components +- android +- ios +- web 包含我们编写的大部分常用代码,可以由android / ios(来自react-native)重用,而app/components是一个可以使用东西的Spring启动项目从web以及react-native-web打包可以在网络上托管的JS。

假设我想创建一个我想在任何地方使用的布局:

app/components

我假设import {View, Text} from 'react-native' class MyView extends Component { render() { return ( <View><Text>Welcome!</Text></View> ); } } 将根据需要加载特定项目中的react-native node_modules react-native-webweb react-native }})。

现在,如何在所有三个项目中导入此创建的视图?我不确定这是否是最好的项目结构。这样做的正确方法是什么? ios/android应该拥有自己的app吗?即使它确实如此,我也不相信package.json支持子项目以及npm(我知道,苹果与橙子的比较,但我不认为像gulp这样的构建系统/ webpack也可以,如果我错了,请纠正我。)

修改

所以我试了一下这个。问题是我不能有以下结构:

gradle

如果project app android ios web package.json package.json web/package.json中有任何常见软件包,我可能会package.json Duplicate module name: AutoFocusUtils(这似乎是在facebook上构建的一些dep管理系统) )。

另外,出于某种原因,从webpack构建node-haste时,某种程度上要求我在web的上下文中拥有babel-preset-*react-native依赖项,这仍然很好,我想我以后可以解决这个问题。

所以我把它移动了一下:

app

一切都很好,但是从project app package.json native android ios index.android.js index.ios.js package.json web package.json ,我再也不能这样做了:

index.android.js

我在手机上收到错误import MyView from './../app/myview' 。但是,从Requiring unknown module ./../app/myview(使用webpack构建时)它可以正常工作。我的web如有帮助:http://pastebin.com/RzmWDgFe

修改

我终于达成了一个我们满意的代码结构。如果有人来这里寻找可行的解决方案:http://git.nomadly.in/rohan/react-native-tri-platform-starter

1 个答案:

答案 0 :(得分:1)

你是对的;代码重用是一个主要的卖点。您可能知道react native packager使用.ios.js.android.js文件结尾来确定要加载的版本。因此,恕我直言,构建代码的最佳方法是使用webandroidios建议的结构,仅包括平台的特定文件(HTML,Xcode项目等) 。)和app / components目录中的所有反应组件。为了获得最佳重用,您应该将您的顶级组件(以及所有其他可能的组件)编写为独立于系统,并包含最少的组件(例如标题,全屏图像等),这些组件则取决于平台。