This page was machine-translated from Portuguese and may contain errors. The Portuguese version is canonical.
Coming from React Native
In RN you describe the UI in JSX and the re-render happens when the state changes. In CrossFly the UI is Java code built once, and you mutate. Read the philosophy first.
Translation table
| React Native | CrossFly |
|---|---|
| functional component + JSX | subclass of Window/Component built in onShow() (no markup) |
useState / re-render |
fields + repaint() |
props |
constructor arguments (no route table) |
<View> / <Text> / <Image> |
Component / Label / ImageView |
<FlatList> |
VirtualListView |
flexbox (flex: 1) |
add(LAY_FILL, c) + VerticalLayout/HorizontalLayout |
StyleSheet |
ComponentStyle / Skin (ingap/outgap = padding/margin) |
react-navigation |
stack of Window (show() / hide()) |
useEffect / Promise / async |
Thread + Component.onUI(...) |
AsyncStorage |
no equivalent → SQLite or files in Device.homeFolder |
Before / after — list
// React Native
function Lista({ itens }) {
return <FlatList data={itens}
renderItem={({ item }) => <Text>{item.nome}</Text>} />;
}
// CrossFly — props become constructor arguments; UI in 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); }
}));
}
}
What changes the most
- No JS bridge and no hot-reload — it is compiled Java (on the desktop the cycle is fast; see platforms).
props→ constructor: pass data vianew Tela(dados)and call.show().StyleSheet→ComponentStyle: padding/margin areingap/outgap, not flex properties.
See also
Was this page helpful?Thanks for the feedback!