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 pelanew Tela(dados)e chame.show().StyleSheet→ComponentStyle: padding/margem sãoingap/outgap, não propriedades de flex.
Veja também
Esta página foi útil?Obrigado pelo feedback!