areslabs / alita Goto Github PK

View Code? Open in Web Editor NEW

1.9K 1.9K 131.0 12.22 MB

一套把React Native代码转换成微信小程序代码的转换引擎工具。我们不造轮子，不发明新框架，只是提供工具把RN扩展到微信小程序端。

Home Page: https://areslabs.github.io/alita

License: MIT License

JavaScript 69.90% TypeScript 30.10%

alita mini-program react react-native redux wechat wechat-mini-program wexin

alita's People

Contributors

Stargazers

Watchers

Forkers

zeroyou doff coolcricket appfws sniperyan wagnlinzh xiaomingtuo leonzhangliang heatwei lrbj coderjiang shaunstanislauslau martindelophy sunflowergj msdgwzhy6 liuzhe429 pickpgk lium115 wxh841969240 amtech chinecc bailianfa gubaojian devenlu vipyami iamxjb carvetime oxoyo xuweng iyang519 runsongyan 15601289787 ykforerlang dexincoder chowel jinlongfubo dut3062796s dataochen linecode lizitang luruozhou torns codeteenager libin1991 myzero1 zhangguozhong kuailingmin yashiro superzk xueyan1 xiaodai liudonghua123 realzbc yongbolu kobeontheway tyeeee tchigher huqing7002 penghuwan longlyboyhe ikeyyang universeapp lonybrain lxq2537664558 d1jk heartsoul shinian156 apphuangweipeng137 liuzhimi nicholashwang r-yan botasky11 leis521 ys610zz yituwangpeng sfdux hubei207 ruolunhui beanluo lvjiancong bluepeople1 canfoo josselu baobao12356 leadrive pubfork supermars01 dfenglei kelin-hong markdashi jiajun1203 2050utopia ryanfu sujeking baiyujie wangzhengbo 715047274 nornand chenhbzl tanlimin201

alita's Issues

ScrollView的ScrollToEnd方法无效

<ScrollView
    ref={ref => this.scrollView = ref}
    style={ styles.container }
    alwaysBounceVertical={ true }
    onContentSizeChange={(contentWidth, contentHeight)=>{
        this.scrollView.scrollToEnd({animated: true})
    }}
>

新建项目报错

npx react-native init WemallApp && alita init WemallApp --typescript

初始化完成后，运行android， app打开时报错

AppContainer@http://localhost:8081/index.bundle?platform=android&dev=true&minify=false:67605:22
[Thu Jul 09 2020 16:50:55.257]  ERROR    TypeError: undefined is not an object (evaluating '_this.view._component.measureInWindow')
[Thu Jul 09 2020 16:50:55.258]  ERROR    TypeError: undefined is not an object (evaluating '_this.view._component.measureInWindow')

This error is located at:
    in SafeView (at withOrientation.js:54)
    in withOrientation (at Header.js:433)
    in RCTView (at View.js:34)
    in View (at createAnimatedComponent.js:165)
    in AnimatedComponent (at createAnimatedComponent.js:215)
    in ForwardRef(AnimatedComponentWrapper) (at Header.js:430)
    in Header (at withOrientation.js:30)
    in withOrientation (at StackViewLayout.js:129)
    in RCTView (at View.js:34)
    in View (at StackViewLayout.js:476)
    in RCTView (at View.js:34)
    in View (at createAnimatedComponent.js:165)
    in AnimatedComponent (at createAnimatedComponent.js:215)
    in ForwardRef(AnimatedComponentWrapper) (at screens.native.js:71)
    in Screen (at StackViewCard.js:42)
    in Card (at createPointerEventsContainer.js:26)
    in Container (at StackViewLayout.js:507)
    in RCTView (at View.js:34)
    in View (at screens.native.js:101)
    in ScreenContainer (at StackViewLayout.js:401)
    in RCTView (at View.js:34)
    in View (at StackViewLayout.js:400)
    in StackViewLayout (at withOrientation.js:30)
    in withOrientation (at StackView.js:49)
    in RCTView (at View.js:34)
    in View (at Transitioner.js:141)
    in Transitioner (at StackView.js:19)
    in StackView (at createNavigator.js:57)
    in Navigator (at createKeyboardAwareNavigator.js:11)
    in KeyboardAwareNavigator (at createNavigationContainer.js:376)
    in NavigationContainer (at Router.js:151)
    in Router (at src/index.tsx:23)
    in App (at renderApplication.js:45)
    in RCTView (at View.js:34)
    in View (at AppContainer.js:106)
    in RCTView (at View.js:34)
    in View (at AppContainer.js:132)
    in AppContainer (at renderApplication.js:39)
[Thu Jul 09 2020 16:50:55.259]  ERROR    TypeError: undefined is not an object (evaluating '_this.view._component.measureInWindow')

This error is located at:
    in NavigationContainer (at Router.js:151)
    in Router (at src/index.tsx:23)
    in App (at renderApplication.js:45)
    in RCTView (at View.js:34)
    in View (at AppContainer.js:106)
    in RCTView (at View.js:34)
    in View (at AppContainer.js:132)
    in AppContainer (at renderApplication.js:39)
[Thu Jul 09 2020 16:50:55.260]  ERROR    TypeError: undefined is not an object (evaluating '_this.view._component.measureInWindow')

This error is located at:
    in NavigationContainer (at Router.js:151)
    in Router (at src/index.tsx:23)
    in App (at renderApplication.js:45)
    in RCTView (at View.js:34)
    in View (at AppContainer.js:106)
    in RCTView (at View.js:34)
    in View (at AppContainer.js:132)
    in AppContainer (at renderApplication.js:39)

RN中使用了react-nagation，报错Uncaught Error: module "app/pages/Main/react-navigation" is not defined

Todo demo 引入第三方包后运行报错

在Todo demo中引入 hello-rn，在alita.config.js中添加

include:[
      path.resolve('node_modules', '@areslabs', 'hello-rn')
    ],

运行后报错

./RNApp.js 32:12
Module parse failed: Unexpected token (32:12)
You may need an appropriate loader to handle this file type, currently no loaders are configured to process this file. See https://webpack.js.org/concepts#loaders

对部分难以转换的部分，是否支持接入原生小程序？

有些部分比较难适配alita的转换，如何在转换后的项目中添加原生小程序文件？在文档中没有找到答案，望解答谢谢~

transition failed ，函数式组件在1.0.1版本下直接导出报错

组件SafeAreaView 没有在react-native指定

HOC 组件看起来是无法在小程序中使用
TypeError: func.body.body is not iterable

这个有点让人摸不着头脑
TypeError: Cannot read property '0' of null

react native style 转为 css的原理是怎样的？

小程序控制台报错： jsEnginScriptError Component is not found in path

小程序控制台有类似报错：

这一般是由开发者工具引起的，解决方法是把：重启开发者工具

RN的Button有问题？

当使用Button时，编译正常，在小程序端运行时报错;

import React from 'react';
import {View, Text, Button, TouchableOpacity} from 'react-native';
import {history} from '@areslabs/router';

const MainPage: React.FC<{}> = ({}) => {
    return (
        <View>
            <Text>Hello World</Text>
            <View>
                <TouchableOpacity onPress={()=>{
                    history.push("SecondPage")
                }}>
                    <Text>Click Me</Text>
                </TouchableOpacity>
                <Button
                    title="Click Me"
                    onPress={() => {
                        history.push("SecondPage")
                    }}
                />
            </View>
        </View>
    );
}

export default MainPage;

异常：

VM2318:1 TypeError: inst.render is not a function
    at updateClassComponent (index.js:1888)
    at render (index.js:1303)
    at renderPage (index.js:2451)
    at index.js:2951
console.error @ VM2318:1
render @ index.js:1311
renderPage @ index.js:2451
(anonymous) @ index.js:2951
Promise.then (async)
WxNormalComp.o.methods.onLoad @ index.js:2950
(anonymous) @ VM2324 WAService.js:2
p.__callPageLifeTime__ @ VM2324 WAService.js:2
jt @ VM2324 WAService.js:2
(anonymous) @ VM2324 WAService.js:2
Mt @ VM2324 WAService.js:2
(anonymous) @ VM2324 WAService.js:2
(anonymous) @ VM2324 WAService.js:2
i.emit @ VM2324 WAService.js:2
emit @ VM2324 WAService.js:2
(anonymous) @ VM2324 WAService.js:2
i.emit @ VM2324 WAService.js:2
emit @ VM2324 WAService.js:2
(anonymous) @ VM2324 WAService.js:2
(anonymous) @ VM2324 WAService.js:2
n @ VM2322 asdebug.js:1
(anonymous) @ VM2322 asdebug.js:1
(anonymous) @ VM2322 asdebug.js:1
_ws.onmessage @ VM2322 asdebug.js:1
VM2318:1 (in promise) MiniProgramError
inst.getWxInst is not a function
TypeError: inst.getWxInst is not a function
    at Ge.<anonymous> (http://127.0.0.1:32560/appservice/_rn_.js:3984:29)
    at Ge.<anonymous> (http://127.0.0.1:32560/appservice/__dev__/WAService.js:2:1897073)
    at commitWork (http://127.0.0.1:32560/appservice/_rn_.js:3942:15)
    at renderPage (http://127.0.0.1:32560/appservice/_rn_.js:3898:3)
    at http://127.0.0.1:32560/appservice/_rn_.js:4390:9

重新思考小程序底层映射React组件的方式

现在Alita的每一个React组件，都会在小程序底层存在一个同等的小程序组件映射。这带来了很多好处

相比其他把节点渲染在一个Page的方案，避免了节点数超出小程序的限制
局部更新,更加优异的性能
其他小程序对自定义组件的潜在优化

同时，也带来一些限制：

自定义组件需要定义 json文件，由于json文件的静态特点，必须要求在编译阶段就生成好组件的引用关系
各家小程序自定义组件实现有差异，如果Alita要支持其他小程序有很多兼容的工作，比如批量更新接口的实现各不相同，类似Flatlist renderItem 这种渲染由其他组件定义的节点，在微信小程序上可以通过抽象节点处理，在其他小程序则需要用 scoped-slot实现，又比如微信小程序的component会退化为一个节点，而其他小程序不一定

如果把所有节点渲染在一个Page，让组件的概念只保留在React层面，可以让Alita支持其他小程序节省很多工作。但是上面提到的好处也就没有了。

我在做一些测试，看是否值得

pageJSON["componentGenerics"]["renderItemCPT"] 字段需为 boolean/object

微信小程序开发助手，1.02.1907300版本
上个版本，转化后，运行正常，当前版本会报错，显示
miniprogram_npm/@areslabs/wx-react-native/component/WXFlatList/index：
pageJSON["componentGenerics"]["renderItemCPT"] 字段需为 boolean/object
pageJSON["componentGenerics"]["ListFooterComponentCPT"] 字段需为 boolean/object
pageJSON["componentGenerics"]["ListHeaderComponentCPT"] 字段需为 boolean/object
pageJSON["componentGenerics"]["ListEmptyComponentCPT"] 字段需为 boolean/object

并且 examples 中 HelloWorldRNWP 显示同样的错误

目前alita已经支持Redux，请问是否有计划支持Mobx ？

目前alita已经只支持Redux，请问是否有计划支持Mobx ？

生成模板找不到 template not found

<TouchableOpacity
          onPress={() => {
            this.props.onPress()
          }}>
            {this.props.disabled
              ? <View style={{opacity: 0.3}}>{this.props.children}</View>
              : this.props.children}
        </TouchableOpacity>

组件内写了类似的三目运算后，模板不会生成，编译也不会有报错

react 需要在配置文件extCompLibs字段指定！

关于alita一键转化时候对不能转化情况的粒度处理

热忱的开发者您好

现在Alita在一键转化的时候
对于那些仅仅因为包含原生平台组件而不符合要求的文件（注意是仅仅），是一律选择不转化的，就是转化后没有生成那个文件
那么能否支持这样一种特性呢：

对于包含原生平台组件（如DatePickerAndroid，ToastAndroid）等组件或API，选择忽略掉这部分组件的转化，但是文件中的其他代码还是允许转化成功的。

也就是说，把转化的粒度要求降低为“组件” 而不是“文件”

现在我们项目耦合了比较多的原生平台的代码，要直接去除成本有点高。
请问这个需求是否合理呢？想听听您的理由

你好～为什么我的外部import的组件也报了no-doret-xxcomponent的错误呢

您好～如题所示，我认为应该只有在props中使用xxcomponent才需要报错吧，我这里使用的是外部import的组件，我觉得应该是能够在转换的时候确定的，所以应该不用报错吧

如有不对，请指正

函数式组件方法名和和文件名不一致的情况，在小程序端报错

比如： a/myFunc.js

export default function XX(props) {}

会报错，但是把 XX改为 myFunc就不报错了，或者用匿名函数也不报错

Alita转化条件限制未来是否会放宽

首先感谢贵司的软件工程师在小程序框架上所做的贡献。╭(￣▽￣)╯
我对Alita和Taro都保持着关注，学习和了解，同时也有一些自己的问题

Taro对于生成小程序项目的限制是比较宽的，而相对之下Alita则严格一些。以下的两个限制在贵司的Taro框架中是不需要考虑的,但在目前版本的Alita中则存在

refs只能是函数
一个文件里只能有一个class组件

请问它们是否也会从未来的Alita的转化限制中解除呢？

关于React Hook API

Alita尚无计划在短期内支持Hook，不得不承认React Hook是很棒的API，但是由于Alita在内部使用的RN版本是0.55.4， React版本是16.3，对Hook的需要尚不强烈，所以Hook短期应该不会支持。

惊雷

一个成熟的RN项目,想全部转为微信小程序

看了一下，当前的issue，目前只是小部分页面直接使用alita转换；我这边如果将已有的全部转化...坐着这边是否有相关的demo呀...目前使用示例好少...(我司目前有好多自定义的rn组件)...看了一下介绍，还处于半懵逼的状态0.0

Alita无法转换使用了react-native-elements的RN项目吗？

我在examples的基础上加上了elements，转换后，小程序里会报找不到module。

自定义组件的ref 在销毁的时候，好像没有清理？？

支持文件监听

alita -i myproject -o myprojectwp 每次修改必须要手动输出，求支持文件监听，自动重新构建出新的输出⽂件

请问有考虑支持React.createContext写法吗？

我们项目有很多地方用到 React.createContext 这个特性，请问 alita 可否支持下?

npm 构建报错

alita转化之后 npm 构建报错：

建议：flutter web转taro小程序

flutter的思路来源于react。它通过一次编写支持开发app（安卓、ios）、桌面、web程序。但是它缺乏国内小程序的支持
5月flutter web发布了，转译为标准的javascript、css、html和canvas成为了现实（dart2js）。

另外，从技术角度上看flutter转译为taro，进而通过taro支持所有平台是可行的

这样前端开发人员只要学习flutter就可以了，然后通过你们的工具转译到其他全平台

这将是伟大的创新，京东的全球首创！可以大大减轻程序员的负担，解放程序员，减少996.icu

请问alita支持ts、tsx的么？

是否支持ts、tsx写的RN代码转义？

react-redux 引入失败

`import { Provider } from 'react-redux'

render() {
return {getRouter()}
}

构建的时候出现错误 **搜索路径失败！**TypeError: Cannot read property 'Provider' of undefined`

Alita现阶段支持TypeScript吗

我是这样想的
1.如果支持对TypeScript转化为Javascript的话就更好了
2.如果不支持的话，那么我这边用tsc编译工具转化一下也可以

请问知不支持呢

不支持transform

去掉后正常

地图组件

重要的地图组件怎么处理？

您好，请问alita支持flow.js吗

衷心感谢你们提供了这个将RN转化为小程序的工具，这给我们的业务带来了帮助。
但是想问一下的是，在官方example里面，我看到了flow的配置文件，但是最终在通过Alita转化我们自己项目的flow风格的JS代码的时候，却出现了错误。

所以我的问题是：你们有什么办法可以在Alita中加入flow转换的功能吗？或者有什么现有的功能可以使用呢

（示例中的flow的痕迹）

（实际使用中Alita转化flow风格代码时候报错了）

同时说一下，我现在的一个替代方法是，自己通过编写shell脚本复制一个新的APP项目出来，然后通过flow-remove-type这个cli去移除flow的风格，变成普通的JS代码，然后再使用Alita转化。

要是Alita有直接的可以做就更好了

最后，不管怎样，谢谢你们

有考虑支持支付宝小程序吗？

有没有考虑过支持web端呢？

社区有 react-native-web 方案，支持把 RN 转成 web，你们有没有考虑过集成进来或者自己开发一套用来支持 web 端？

使用案例征集

如果您有上线的使用Alita的业务，可以在这里留言，我们定期更新到首页README，最好能够提供App或者小程序名，以及App图标或者小程序二维码 😄 😄 😄

不知道大佬有没有想过做个反向的，把微信小程序代码转成rn的

给大佬点赞

原理的疑惑

https://areslabs.github.io/alita/%E4%B8%80%E7%A7%8D%E8%AE%A9%E5%B0%8F%E7%A8%8B%E5%BA%8F%E6%94%AF%E6%8C%81JSX%E8%AF%AD%E6%B3%95%E7%9A%84%E6%96%B0%E6%80%9D%E8%B7%AF.html

官网这篇文章中有介绍原理，但是其中有一处有疑惑。

预编译时期是怎么知道000002的View里面包含的是个template的，即b的值？

alita是否有和微信小程序一样的switchTab可用？

alita是否有和微信小程序一样的switchTab可用？做非Tab页跳转

使用demo报错

用微信开发工具打开HelloWordRNWP报错：
Page is not constructed because it is not found.
console.error @ VM26:1
E @ WAService.js:18
Kt @ WAService.js:19
Qt @ WAService.js:19
nn @ WAService.js:19
(anonymous) @ WAService.js:19
(anonymous) @ WAService.js:18
X.emit @ WAService.js:7
emit @ WAService.js:6
(anonymous) @ WAService.js:8
(anonymous) @ WAService.js:5
n @ appservice?t=1564994525751:5100
(anonymous) @ appservice?t=1564994525751:5100
(anonymous) @ appservice?t=1564994525751:5100
_ws.onmessage @ appservice?t=1564994525751:5100

Cannot read property 'props' of undefined; [Component] Lifetime Method Error @ npm/@areslabs/wx-react-native/wxComponents/WXFlatList/index#(anonymous) TypeError: Cannot read property 'props' of undefined

A跳转到B页面，B页面setWxInstByUUID一个名为a000000Q的对象，B返回A页面时，B页面调用removeUUID移除了a000000Q对象，单移除后又调用了getWxInstByUUID(a000000Q)，因为innerMap[key]为undefined所以报错，这里可以innerMap[key] || {} 做一下保护。为何在移除该uuid后还会get一次

为啥京东没有自己的空间库？

为啥京东没有自己的github仓库？还有单打独斗，这两个轮子（另一个jd的）都连一点jd的标记真的好吗？

[build] app.json/pages 路径问题

当我如下时候，微信开发者工具将会报错 ,工具转化路径解析有误。

未找到 app.json 中的定义的 pages "src/components/component-d/index" 对应的 WXML 文件

  .
├── components
│   ├── component-d.jsx
│   └── component-d.tsx
├── index.jsx
├── index.tsx
├── index.web.jsx
├── index.web.tsx
├── react-app-env.d.ts
├── serviceWorker.js
├── serviceWorker.ts
└── types.d.ts

index.jsx 中的代码如下：

import React, { PureComponent } from "react";
import { Router, Route, TabRouter } from "@areslabs/router";
import D from './components/component-d';
export default class App extends PureComponent {
    render() {
        return (<Router>
        <TabRouter text="常见动画">
          <Route key={"D"} component={D}/>
        </TabRouter>
      </Router>);
    }
}

生成的 app.json 文件内容为：

{
  "pages": [
    "src/components/component-d/index"
  ],
  "window": {
    "backgroundTextStyle": "light",
    "backgroundColor": "#E9E9E9",
    "enablePullDownRefresh": false
  },
  "tabBar": {
    "list": [
      {
        "pagePath": "src/components/component-d/index",
        "text": "常见动画"
      }
    ]
  },
  "sitemapLocation": "sitemap.json"
}

在 pages 字段中自动帮我添加上了index，此处转化的时候应该判断下是否为文件夹？还是说我文档看漏啦