# 从 React Native 迁移

> 在 Java 代码中将 JSX/useState→Component 映射，无桥接、无热重载。

Source: https://crossfly.dev/zh/docs/migrate/from-react-native — CrossFly documentation. Full docs as one file: https://crossfly.dev/llms-full.txt

# 从 React Native 迁移

在 RN 中你用 **JSX** 描述 UI，状态变化时会发生重新渲染。在 CrossFly 中 UI 是
装配一次的 **Java 代码**，你**变更**它。请先阅读 [理念](/docs/migrate/overview)。

## 转换表
| React Native | CrossFly |
|---|---|
| 函数组件 + JSX | 在 `onShow()` 中装配的 `Window`/`Component` 子类（无标记语言） |
| `useState` / 重新渲染 | 字段 + `repaint()` |
| `props` | **构造函数**参数（无路由表） |
| `<View>` / `<Text>` / `<Image>` | `Component` / `Label` / `ImageView` |
| `<FlatList>` | `VirtualListView` |
| `flexbox`（`flex: 1`） | `add(LAY_FILL, c)` + `VerticalLayout`/`HorizontalLayout` |
| `StyleSheet` | `ComponentStyle` / `Skin`（`ingap`/`outgap` = 内边距/外边距） |
| `react-navigation` | `Window` 栈（`show()` / `hide()`） |
| `useEffect` / `Promise` / `async` | `Thread` + `Component.onUI(...)` |
| `AsyncStorage` | **无对应项** → SQLite 或 `Device.homeFolder` 中的文件 |

## 之前/之后——列表
```jsx
// React Native
function Lista({ itens }) {
   return <FlatList data={itens}
      renderItem={({ item }) => <Text>{item.nome}</Text>} />;
}
```
```java
// CrossFly — props 变成构造函数参数；UI 用 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); }
      }));
   }
}
```

## 变化最大的地方
- **没有 JS *桥接* 且没有热重载**——这是编译后的 Java（在桌面端循环很快；参见
  [平台](/docs/platforms)）。
- **`props` → 构造函数：**通过 `new Tela(dados)` 传递数据并调用 `.show()`。
- **`StyleSheet` → `ComponentStyle`：**内边距/外边距是 `ingap`/`outgap`，不是 flex 属性。

## 另请参阅
- [在界面间导航](/docs/ui/navigation/navigate-between-screens) · [性能与大列表](/docs/best-practices/performance-e-listas-grandes)