Skip to main content
React Logo

React Native

一次学习,随处编写。

使用 React 创建适用于 Android、iOS 等的原生应用

React Native 将原生开发的最佳部分与 React 相结合,React 是用于构建用户界面的一流 JavaScript 库。

使用很少或很多。 你现在可以在现有的 Android 和 iOS 项目中使用 React Native,也可以从头开始创建一个全新的应用。

使用 JavaScript 编写 - 使用原生代码渲染

React 原语渲染成原生平台 UI,这意味着你的应用使用与其他应用相同的原生平台 API。

多个平台,一份 React。 创建特定于平台的组件版本,以便单个代码库可以跨平台共享代码。 借助 React Native,一个团队可以维护多个平台并共享一项通用技术 - React。

import React from 'react';
import {Text, View} from 'react-native';
import {Header} from './Header';
import {heading} from './Typography';

const WelcomeScreen = () => (
<View>
<Header title="Welcome to React Native"/>
<Text style={heading}>Step One</Text>
<Text>
Edit App.js to change this screen and turn it
into your app.
</Text>
<Text style={heading}>See Your Changes</Text>
<Text>
Press Cmd + R inside the simulator to reload
your app’s code.
</Text>
<Text style={heading}>Debug</Text>
<Text>
Press Cmd + M or Shake your device to open the
React Native Debug Menu.
</Text>
<Text style={heading}>Learn</Text>
<Text>
Read the docs to discover what to do next:
</Text>
</View>
);

适合所有人的原生开发

React Native 可让你创建真正的原生应用,并且不会损害用户的体验。 它提供了一组与平台无关的原生组件的核心,例如 ViewText、以及 Image,它们直接映射到平台的原生 UI 构建块。

无缝跨平台

React 组件封装现有的原生代码,并通过 React 的声明式 UI 范例和 JavaScript 与原生 API 进行交互。 这使得全新的开发团队能够进行原生应用开发,并且可以让现有的本机团队更快地工作。
App.jsHeader.ios.jsHeader.android.jsBody.jsImageTextTextTextTextText

快速刷新

保存后立即查看你的更改。 借助 JavaScript 的强大功能,React Native 可让你以闪电般的速度进行迭代。 不再需要等待原生构建完成。 保存、查看、重复。

试一试

  1. 运行这个

    npx react-native init MyTestApp
  2. 阅读这些

    新手入门学习基础知识