Alita是一款把ReactNative运行在小程序平台的转化工具，他的侵入性很低，所以选用与否并不会对你的原有ReactNative开发方式造成太大影响。配合上react-native-web可以把ReactNative应用运行在IOS， Android，H5，微信小程序4端。
针对小程序平台，Alita还提供了很多方便的功能。例如，方便分析小程序包大小的analyzer指令，一键自动小程序分包，完善小程序npm能力等等。
V2.4版本主要提供了对小程序内置组件，自定义组件的支持。小程序本身提供了丰富的组件video，map，picker等等，而且社区也有许多强大的小程序组件库。完全用ReactNative生态去对齐映射这些组件是不太现实的，所以V2.4版本提供了对这些组件的直接使用，这样开发者就可以借助平台判断，根据平台的不同渲染出不同平台的原生组件。
下面我们具体看一下
平台判断
首先，无论是对小程序内置组件还是对小程序自定义组件的使用，都是只会在小程序平台生效，所以需要平台判断，和ReactNative一样，一般有两种方式： 文件内判断和建立平台文件
-
文件内判断：
if (Platoform.OS === 'wx') { return <view>Hello wx</view> // <-- 直接使用小程序组件 } else { return <View><Text>Hello ReactNative</Text></View> // <-- 使用RN组件 } -
建立平台文件：建立单独的小程序
.wx后缀文件，比如你有一个3端的地图组件，那么你可能会有3个文件：Map.ios.js Map.android.js Map.wx.js
使用JSX构建UI
下面我们来看下JSX构建UI和小程序wxml方式有什么不同。如果开发过React应用，将会对下面的使用方式非常熟悉。
属性绑定
JSX的绑定数据是通过JSX表达式来完成的，JSX表达式包含在{}内。
以小程序button为例
<button
type="primary"
size={this.state.size}
bindtap={() => {
console.log('我被点击了！')
}}
>
点击我
</button>
注意这里的size，bindtap的属性绑定。 size由组件的state控制，所以size={this.state.size}， 你可以通过this.setState({size: xx})， 来修改这里button组件的大小；而bindtap是组件点击的事件回调，所以需要传递一个方法。
条件/数组渲染
在小程序开发方式里面有 条件渲染wx:if，数组渲染wx:for的概念，这些在JSX里面都是朴素的JS语句。
比如条件渲染：
condition && <view/>;
condition ? <view>1</view> : <view>2</view>
比如数组渲染：
arr.map(item => <view>{item}</view>)
数组+条件渲染
arr.map(item => {
return item ? <view>1</view> : <view>2</view>
})
模版
同样的，小程序的模版template在JSX的世界是不存在的，UI的组合也是以编程的方式进行。
class A extends React.Component {
getIcons(txt) {
return <view>{txt}<view>
}
render() {
return (
<view>
{
this.state.condition && <view>Hello</view>
}
{
this.getView(this.state.txt)
}
</view>
)
}
}
总的来说，JSX本质上是JS，相对小程序wxml的方式更加灵活，JSX不存在类似wx:for， wx:if的指令，而是以编程的思维去构建UI，这是一种图灵完完备的方式。
样例 HelloWorldRN 效果
小程序自定义组件
Alita在编译打包的过程中，会把项目下的weixin目录copy到小程序目录，我们可以把小程序自定义组件放置这这个目录下，以微信官方组件库weui-miniprogram为例，目录结构如下：
另外，还需要在配置文件alita.config.js 配置自定义组件的路径：
alita.config.js
module.exports = {
// 其他配置
...
//小程序自定义组件
miniprogramComponents: {
"badge": "/weixin/weui-miniprogram/badge/badge",
"cell": "/weixin/weui-miniprogram/cell/cell",
"cells": "/weixin/weui-miniprogram/cells/cells",
// 防止和小程序内置icon重复
"mp-icon": "/weixin/weui-miniprogram/icon/icon",
...
}
}
这样配置了以后，就可以直接用React方式来使用这些组件了。
<mp-icon type="add" size="25"/>
最后
Alita的代码托管在github，欢迎使用和star。
