给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
。
由于篇幅过长,我将会在下一篇文章中继续本文的话题。
0 人喜欢
暂无评论,来发布第一条评论吧!