小知识，大挑战！本文正在参与“程序员必备小知识”创作活动。
本文已参与「掘力星计划」，赢取创作大礼包，挑战创作激励金。

背景

尽管无数次听过RN凉了，Aribnb放弃RN等消息，无论时公司还是熟人所在的公司都在广泛的使用RN，而且比例甚至超过50%，我觉得还是有必要学习一下。

本人从业10年，历经iOS、Android、Java等开发工作，工作中的项目貌似只有移动端、PC桌面和纯服务端，完全没有前端的经历，系列文章以零基础开始，学习RN的使用，在30+年纪，努力多开辟一条生路。

闲话少说，我们先根据官方文档学习一下RN的基本知识。

简介

React Native (简称RN)是Facebook于2015年4月开源的跨平台移动应用开发框架，是Facebook早先开源的JS框架 React 在原生移动应用平台的衍生产物，支持iOS和安卓两大平台。RN使用Javascript语言，类似于HTML的JSX，以及CSS来开发移动应用，因此熟悉Web前端开发的技术人员只需很少的学习就可以进入移动应用开发领域。

预备知识

要使用 React Native，你需要对 JavaScript 基础知识有所了解。

额，不懂js，怎么办呢，先尝试一下，文档能不能继续学习下去，如果不行，只能再开一个JS的学习专题了。。。

交互示例

看一下RN的hello,world代码

import React from 'react';
import { Text, View } from 'react-native';

const YourApp = () => {
  return (
    <View style={{ flex: 1, justifyContent: "center", alignItems: "center" }}>
      <Text>
        Try editing me! 🎉
      </Text>
    </View>
  );
}

export default YourApp;

其实没有js基础也能大概看懂：

引入React库
引入ReactNative库中的Text和View控件
声明一个App（这个语法很特别）
- App中定义了一个View（style是控件样式，目的是居中，具体的暂时不懂），View中定义了一个文本
展示App

渲染出来后就是想象中的样子，一个居中的文本

根据之前的一点flutter经验，可大体理解，还好学了一点flutter啊，要不直接抓瞎了。。

函数式组件与 Class 组件

你可以在 React 中使用函数式组件或 Class 组件。下面是两种写法：

//函数式组件
import React from 'react';
import { Text, View } from 'react-native';

const HelloWorldApp = () => {
  return (
    <View style={{
        flex: 1,
        justifyContent: 'center',
        alignItems: 'center'
      }}>
      <Text>Hello, world!</Text>
    </View>
  );
}

export default HelloWorldApp;

//Class组件
import React, { Component } from 'react';
import { Text, View } from 'react-native';

class HelloWorldApp extends Component {
  render() {
    return (
      <View style={{
          flex: 1,
          justifyContent: "center",
          alignItems: "center"
        }}>
        <Text>Hello, world!</Text>
      </View>
    );
  }
}

export default HelloWorldApp;

Class组件更像Java的写法，声明一个继承自Component的类，
函数式组件更像Kotlin的写法，通过匿名函数简化代码

官方更推荐使用函数式组件

最开始只有 Class 组件能够使用 state ，但自从有了 React Hooks API, 你可以为函数组件添加 state 和很多其它的功能。

应该对应的是flutter中的stateful和stateless，只有是状态的组件才能动态的刷新。

核心组件与原生组件

视图（Views）与移动开发

在 Android 和 iOS 开发中，一个视图是 UI 的基本组成部分：屏幕上的一个小矩形元素、可用于显示文本、图像或响应用户输入。甚至应用程序最小的视觉元素（例如一行文本或一个按钮）也都是各种视图。某些类型的视图可以包含其他视图。全部都是视图。

原生组件

在 Android 开发中是使用 Kotlin 或 Java 来编写视图；
在 iOS 开发中是使用 Swift 或 Objective-C 来编写视图。

在 React Native 中，则使用 React 组件通过 JavaScript 来调用这些视图。

在运行时，React Native 为这些组件创建相应的 Android 和 iOS 视图。由于 React Native 组件就是对原生视图的封装，因此使用 React Native 编写的应用外观、感觉和性能与其他任何原生应用一样。我们将这些平台支持的组件称为原生组件。\

React Native 还包括一组基本的，随时可用的原生组件，您可以使用它们来构建您的应用程序。这些是 React Native 的核心组件。

核心组件

REACT NATIVE UI COMPONENT	ANDROID VIEW	IOS VIEW	WEB ANALOG	说明
<View>	<ViewGroup>	<UIView>	A non-scrollling <div>	A container that supports layout with flexbox, style, some touch handling, and accessibility controls
<Text>	<TextView>	<UITextView>	<p>	Displays, styles, and nests strings of text and even handles touch events
<Image>	<ImageView>	<UIImageView>	<img>	Displays different types of images
<ScrollView>	<ScrollView>	<UIScrollView>	<div>	A generic scrolling container that can contain multiple components and views
<TextInput>	<EditText>	<UITextField>	<input type="text">	Allows the user to enter text

示例：

import React from 'react';
import { View, Text, Image, ScrollView, TextInput } from 'react-native';

const App = () => {
  return (
    <ScrollView>
      <Text>Some text</Text>
      <View>
        <Text>Some more text</Text>
        <Image
          source={{
            uri: 'https://reactnative.dev/docs/assets/p_cat2.png',
          }}
          style={{ width: 200, height: 200 }}
        />
      </View>
      <TextInput
        style={{
          height: 40,
          borderColor: 'gray',
          borderWidth: 1
        }}
        defaultValue="You can type in me"
      />
    </ScrollView>
  );
}

export default App;

代码中根视图是一个ScrollView，ScrollView中从上往下分别是：文本、View（包含文本和图片）、文本输入框。

本章只是做了一个简介，对比flutter还算比较容易理解，后续我们跟着官方文档继续学习。

1.零基础学RN-入门基础

背景

简介