请稍等 ...

【重要】React Native开发者如何快速上手Flutter开发-文档教程

本节课的设计初衷是希望帮助到有一定React Native知识的同学，能够复用到现有的React Native知识来快速上手Flutter开发。

Flutter与React Native一样，Flutter使用反应式视图。不同的是React Native是将布局转换成原生Android或iOS的控件，而Flutter则是编译为本机代码。 Flutter控制屏幕上的每个像素，这避免了由于需要JavaScript桥接而导致的性能损失。

语言基础

在开发语言上Flutter采用的是Google的Dart语言，从Dart2开始Dart便是强类型语言，而且是静态类型的，这和React Native同学熟知的JavaScript语言是有很大不同的，对于React Native开发的同学，接触到比较多的编程语言通常是JavaScript，JavaScript是弱类型，动态类型语言，所以在React Native同学在学习Dart的时候一定要分清这两个概念。

另外还有很重要的一点是Dart是面向对象的，如果你有OOP也就是面向对象编程的经验，那么学习Dart会很轻松。
对于React Native同学来说，JavaScript不是面向对象的，所以学习Dart会有一定的适应过程，可以将Dart作为你的第一个面向对象的编程语言进行学习。

开发工具

在开发工具上Flutter的官方支持的开发工具是Android Studio，它是一个用来开发Android APP的IDE，那么除了Android Studio之外，对于熟悉VS Code的同学来说，我们还可以用VS Code来开发Flutter，我们只需要在现有的Android Studio与VS Code的基础上安装Flutter和Dart插件即可让我们手中的手头的工具拥有开发Flutter的能力，这些环境的搭建大家可以参考我们课程中《开发工具准备与开发环境搭建》一节的讲解。

布局

在布局方面，Flutter采用的是声明式UI布局方式这和React Native通常采用的css的布局方式有很大的不同。

为了减轻开发人员在各种UI状态之间转换的编程负担，Flutter让开发人员描述当前的UI状态，并切不需要关系它是如何过渡到框架的。

虽然声明式UI能帮我们减轻很多负担，但大家要将布局的思维方式要转变过来。

接下来，我们来体验一下Flutter声明式UI布局方式的效果：

Container(
    decoration: BoxDecoration(color: Colors.grey),
    child: Text(
    '声明式布局',
    style: TextStyle(
        fontSize: 20, fontWeight: FontWeight.w600, color: Colors.red),
    ),
)

从上面Flutter代码可以看出，Flutter的布局方式和我们React Native布局常用的css有所不同，从React Native布局方式到Flutter的布局方式的转变需要一段时间进行适应，我们需要做的就是多画界面从中找到感觉，另外在课程中我们为大家准备了《如何进行Flutter布局开发？》相关知识点的讲解，推荐大家进行学习。