命令转化

假定你使用了一个npm的纯JS组件： @areslabs/hello-rn，那么你RN项目的package.json应该如下：

...

"dependencies": {
    "@areslabs/hello-rn": "^1.0.0",
    ...
},

...

由于alita 现阶段不会处理 node_modules，所以在转化为小程序的时候，所以@areslabs/hello-rn还是一个RN组件，这会导致转化处理的小程序运行失败。

对于这种在node_modules目录下的纯JS组件， alita提供了一个可以把纯JS的RN组件转化为小程序组件的方法。

要注意这个纯JS组件不能违反alita的限制，如果违反了，需要自己手动调整！

转化的步骤如下：

1. 假定 hello-rn组件的源码在 hello-rn目录，我们把他转化为小程序自定义组件输出在hello-wx目录

     alita -i hello-rn -o hello-wx --comp --wxName=@areslabs/hello-wx
   

   --comp 指定alita转化的是单独的组件，而不是整个项目。

   --wxName 指定 这个转化小程序上包的包名

2. 发布npm包：@areslabs/hello-wx

    cd hello-wx
    npm publish
   

   把包发布到npm，供其他程序使用，其中包名由上面的wxName指定

3. 修改alita配置文件 alita.config.js，在dependencies指出包的映射，并且在compLists中指明所导出的组件。 然后在配置文件配置如下：

   module.exports = {   
       dependencies: [
           {
               name: "@areslabs/hello-rn",
               wxName: "@areslabs/hello-wx",
               compLists: [
                   {
                       name: "Hello",
                       path: "/src/index"
                   },
                   {
                       name: "HelloRN",
                       path: "/src/HelloRN"
                   },
                   {
                       name: "HelloWX",
                       path: "/src/HelloWX"
                   }
               ]
           },
       ]
   }
   

使用效果

以上，我们对一个 React Native 组件在微信小程序上的适配工作就结束了，对于以后所有使用这个 Hello 组件的 React Native 应用来说，就可以直接转化为微信小程序版本了。

RN组件：

import {Hello, HelloRN, HelloWX} from '@areslabs/hello-rn'

class App extends React.Component {
    render() {
        return <View>
             <Hello/>
        </View>
    }
}

转化之后的小程序组件效果:

import {Hello, HelloRN, HelloWX} from '@areslabs/hello-wx'  // <--- 被替换为@areslabs/hello-wx

...

小程序定义组件引用的json文件，将根据path: '/index'， 生成如下json文件：

{
    "component": true,
    "usingComponents": {
        "Hello": "@areslabs/hello-wx/src/index",   // <--- 根据配置文件的path 生成json文件
        "HelloRN": "@areslabs/hello-wx/src/HelloRN",
        "HelloWX": "@areslabs/hello-wx/src/HelloWX"
    },
    "componentGenerics": {}
}