React Native 系列

Posted 2020-10-04 于继海

前言

本系列是基于React Native版本号0.44.3写的，最初学习React Native的时候，完全没有接触过React和JS，本文的目的是为了给那些JS和React小白提供一个快速入门，让你们能够在看React Native语法的时候不那么费劲，有过前端开发经验的可以直接忽略。

什么是React

React是一个javascript框架，用来开发web应用。Web应用开发中，比较流行的有三个框架：

• react
• angular
• vue

从名字上，就能看到react native是基于React（都是Facebook出品）。React的设计思想是：

• Declarative（交互式的）

  应用都是基于状态的,应用会随着数据的变化切换到不同的状态,React
  将这种状态抽象为一个个View，这样状态改变后，利用React就在不同
  的View之间切换。这样，让代码更清晰可预测，也方便测试。

• Component-Based（基于组件的）

  把管理状态的View封装成Component，然后再把这些Component
  组合到一起来实现复杂的UI。

• Learn Once, Write Anywhere（一次编写，多处编译）

  React支持Web开发，Server开发（Node）,同样也支持本文提到的App开发（React Native）。

JSX

JSX是JavaScript语言的扩展，它并不改变JS本身语法。使用起来类型XML，React会对JSX的代码进行编译，生成JavaScript代码，用来描述React中的Element如何渲染。

上篇文章创建的项目中，index.ios.js里面的这段代码就是JSX语法：

render() {
    return (
      <View style={styles.container}>
        <Text style={styles.welcome}>
          Welcome to React Native!
        </Text>
      </View>
    );
  }

其中，

<Text style={styles.welcome}>
    Welcome to React Native!
</Text>

会被编译成

React.createElement(
    Text,
    {style: styles.welcom},
    \'Welcome to React Native!\'
)

注意：使用JSX，一定要在scope中，能够访问到React和对应的Element。比如刚刚的例子，在代码的最上面看到了这样的import：

import React, { Component } from \'react\';
import {
    AppRegistry,
    StyleSheet,
    Text,
    View,
    TouchableHighlight
} from \'react-native\';

tips: jsx编译结果在线查看
如果你的标签是空的，可以用/>进行close，比如：
<CustomComponent style={styles.welcome} />

大小写

JSX对大小写开头是敏感的

• 小写字母开头会被认为是html内置的标签。比如div
• 大写字母开头会被认为是自己创建的或者import的component

所以，自定义的component必须是大写字母开头

举个

以上是关于React Native 系列的主要内容，如果未能解决你的问题，请参考以下文章

《React-Native系列》3RN与native交互之CallbackPromise

React Native Android入门实战及深入源码分析系列——React Native源码编译

React Native 系列

React Native开发React Native控件之Touchable*系列组件详解(18)

React-Native系列Android——Native与Javascript通信原理

REACT NATIVE 系列教程之九REACT NATIVE版本升级步骤与注意事项！