Pular para o conteúdo
CrossFly é 100% open sourceSiga no GitHub
CrossFlyCrossFly
Começar

Vindo do React Native

No RN você descreve a UI em JSX e o re-render acontece quando o estado muda. No CrossFly a UI é código Java montado uma vez, e você muta. Leia primeiro a filosofia.

Tabela de tradução

React Native CrossFly
componente funcional + JSX subclasse de Window/Component montada em onShow() (sem markup)
useState / re-render campos + repaint()
props argumentos de construtor (sem tabela de rotas)
<View> / <Text> / <Image> Component / Label / ImageView
<FlatList> VirtualListView
flexbox (flex: 1) add(LAY_FILL, c) + VerticalLayout/HorizontalLayout
StyleSheet ComponentStyle / Skin (ingap/outgap = padding/margem)
react-navigation pilha de Window (show() / hide())
useEffect / Promise / async Thread + Component.onUI(...)
AsyncStorage sem equivalente → SQLite ou arquivos em Device.homeFolder

Como era / como fica — lista

// React Native
function Lista({ itens }) {
   return <FlatList data={itens}
      renderItem={({ item }) => <Text>{item.nome}</Text>} />;
}
// CrossFly — props viram argumentos de construtor; UI em Java
public class Lista extends Window {
   private final List<Item> itens;
   public Lista(List<Item> itens) { this.itens = itens; }   // "props"
   @Override public void onShow() throws Exception {
      super.onShow();
      setLayout(new VerticalLayout());
      add(LAY_FILL, new VirtualListView(Relative.ofFont(3f), new DataAdapter() {
         public int getCount() { return itens.size(); }
         public Component createView() { return new Label(""); }
         public void bindView(Component v, int i) { ((Label) v).setText(itens.get(i).nome); }
      }));
   }
}

O que mais muda

  • Sem bridge JS e sem hot-reload — é Java compilado (no desktop o ciclo é rápido; ver plataformas).
  • props → construtor: passe dados pela new Tela(dados) e chame .show().
  • StyleSheet → ComponentStyle: padding/margem são ingap/outgap, não propriedades de flex.

Veja também

Esta página foi útil?