给Web开发者写的React Native简介，React Native与React的区别与对比（1）

React Native是React下的一个跨平台框架，能让你用熟悉的React JSX语法来进行跨平台开发。所谓的跨平台开发是如今的一种趋势，即用同一种语言来同时进行Web端、手机端安卓与IOS、桌面端Windows、MacOS、Linux的开发。这样不仅能极大的提高开发效率，同时大大增加了代码的可维护性，节省了大量的成本。

然而React Native虽然带个React，用的也是JSX语言，却跟React有很多不一样的地方。因为React Native不仅面向网页端，还面向手机端APP，而React Native的代码会直接编译为native原生代码。在本文中，我将会列举说明几个React Native的不同之处。

首先，在React Native中我们不能像React那样直接使用HTML语言，因为无论是Android还是IOS，都无法编译HTML语言。因此，我们需要使用React Native提供的组件。在React Native中，如果你想要写<div>，则需要换成<View>。View组件在Web端会被编译成<div>，而在Android和IOS则分别对应android.view和UIView。

更多的，如果你想要写<p>或者<span>，那么你需要写<Text>。Text组件可以嵌套（nested），而两个Text在一起会跟p一样换行

<View>
  <Text>1</Text>
  <Text>2</Text>
</View>

需要注意的是，在Web端你可以在任意HTML标签里写字符串，如<div>Hello!</div>，但是在React Native你不能在Text外写任何字符串，不然会报错。有了<View>和<Text>（<div>和<p>）你很自然的想要修改他们的样式。在Web端React，你可以写CSS然后通过className来设置样式，或者直接写style来改变样式。而在React Native中，你只能通过style来设置样式，并且CSS属性还跟Web端有很多不同。

而设置style的方式也跟Web端React有一些不同，倒是跟Vue挺像。首先跟React一样的是，你可以像className那样写style：<View style={styles.container}></View>，也可以直接写<View style={{ marginTop: 50 }}></View>。而第一种写法，你需要在函数体（functional component）外将style写下来，具体例子见下（来自官网）：

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

const LotsOfStyles = () => {
  return (
    <View style={styles.container}>
      <Text style={styles.red}>just red</Text>
      <Text style={styles.bigBlue}>just bigBlue</Text>
      <Text style={[styles.bigBlue, styles.red]}>bigBlue, then red</Text>
      <Text style={[styles.red, styles.bigBlue]}>red, then bigBlue</Text>
    </View>
  );
};

const styles = StyleSheet.create({
  container: {
    marginTop: 50,
  },
  bigBlue: {
    color: 'blue',
    fontWeight: 'bold',
    fontSize: 30,
  },
  red: {
    color: 'red',
  },
});

export default LotsOfStyles;

是不是感觉跟Vue有一点像😂。说完style的语法，接下来就是CSS的属性了。

在React Native中，View的display属性默认是flex，并且只有flex或者none可选，并没有Web端的block值。而flexDirection跟往常的一样，除了默认是column，跟Web端相反。因此，在React Native所有layout都是基于flex的，要么不显示（none），要么flex，这跟Web端有很大不同。默认flex也意味着，你想要居中任何东西会变得非常方便，如果你使用React Native版Tailwind CSS——NativeWind，那么你只需要加上className="items-center"。在React Native中，flex: 1将会变得尤为重要，一个screen中的第一个View往往不能全屏，这时就需要flex: 1，而有时字体溢出需要加上flex: 1才会正常。

除了flex外，React Native中的margin与padding也与React不同，以margin为例，你不能这样写margin: 10 20，你只能这样写marginHorizontal: 20; marginVertical: 10，而其他属性像marginLeft这些跟原来一样。在某些情况下，我觉得这种写法比Web端还要方便。接着，React Native的边框属性border也跟React有些不同，你不能直接这样写border: 1 solid #ddd，你只能这样一个个列出来borderWidth: 1; borderStyle: 'solid'; borderColor: '#ddd'。

而在React Native中position属性只有absolute, relative, static可选，这也意味着如果你想要实现sticky相关的layout，如sticky header、collapsible tabview等，会变得十分困难。而这在Web端，你只需要加个position: sticky或者加个static转到fixed的监听器就能做到。

说完View，我们说Text。在React Native中，想要实现文本单行溢出省略或者多行溢出省略，比Web端简便得多。你只需要设置numberOfLines即可：

<Text numberOfLines={1}>666666666666666666666666666666666666666666666666666</Text>
<Text numberOfLines={4}>999999999999999999999999999999999999999999999999999</Text>

需要注意的是，这是唯一方法，你不能像Web端一样设置-webkit-line-clamp: 4或者text-overflow: ellipsis。

由于篇幅过长，我将会在下一篇文章中继续本文的话题。