Html

Edit 变更圈子

查看历史

Share

Flag

How can I center horizontally and vertically a text? I don't want to use position absolute because I try with it and my other div getting worse. Is there another way to do that ?div { height: 400px; width: 800px; background: red; }<div> <h1>This is title</h1> </div>

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。由于篇幅过长，我将会在下一篇文章中继续本文的话题。

本文我们继续之前的话题给Web开发者写的React Native简介，React Native与React的区别与对比（1），在上文中我们讲到在React Native想要写<p>或者<span>需要用Text组件。除了展示文本，还有一个很重要的东西就是展示图片。在React Native中你无法使用HTML的<img>，而要用React Native提供的Image组件。处理图片可以说是React Native中的一个难点，因为在React Native中无论是什么图片都需要你设置一个宽度和高度，见实例：import React from 'react'; import {Image} from 'react-native'; import {SafeAreaView, SafeAreaProvider} from 'react-native-safe-area-context'; const DisplayAnImage = () => ( <SafeAreaProvider> <SafeAreaView style={styles.container}> <Image style={{ width: 50, height: 50 }} source={require('@expo/snack-static/react-native-logo.png')} /> <Image style={{ width: 50, height: 50 }} source={{ uri: 'https://reactnative.dev/img/tiny_logo.png', }} /> <Image style={{ width: 66, height: 58 }} source={{ uri: 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADMAAAAzCAYAAAA6oTAqAAAAEXRFWHRTb2Z0d2FyZQBwbmdjcnVzaEB1SfMAAABQSURBVGje7dSxCQBACARB+2/ab8BEeQNhFi6WSYzYLYudDQYGBgYGBgYGBgYGBgYGBgZmcvDqYGBgmhivGQYGBgYGBgYGBgYGBgYGBgbmQw+P/eMrC5UTVAAAAABJRU5ErkJggg==', }} /> </SafeAreaView> </SafeAreaProvider> ); export default DisplayAnImage;你不能像在Web端那样直接写个width: 100%就完事了，由于React Native并不会计算图片的高度，所以如果你没有给高度设置一个数值，那么图片将会不可见。因此，在React Native想要实现Web端里width: 100%; height: 100%的图片，就需要你动态计算每张图片的高度（宽度固定）。好在React Native提供了getSize() API，允许你得到每张图片的原始宽度和高度，你可以根据自己的需要用这个API来造轮子。图片除了宽度和高度两个重要属性，还有一个很重要的属性就是resizeMode，这个对应Web端CSS的object-fit。而跟Web端不同，resizeMode的取值并非跟object-fit一一对应，并且resizeMode的默认值是cover，即图片会自动裁剪以保持宽高比。除了使用React Native本身的Image组件，你也可以使用expo-image，或者react-native-fast-image。不过fast-image已经没有维护了，倒是有个fork这个库的有维护，有需要的可以自行寻找。说完Image，还有一个很重要的东西就是列表List了。在Web端只要你的内容超出了屏幕高度，那么滚动是很自然的事情。但是在React Native仅仅使用View组件是不能滚动的，内容超出屏幕高度的结果就是内容不可见，想要滚动就需要用到ScrollView。而ScrollView提供了大量的API，可以让你非常方便的设置需要跟滚动相关的东西，这跟Web端相比是一个优势。比如说实现无限滚动，在Web端你要么使用别的组件，要么自己实现，实现方法大多都比较复杂，不仅要监听滚动，还要考虑很多其他东西。而在React Native你只需要将相应的handler放到onEndReached这个prop里，当滚动到底部时就会自动执行一次你的handler。又比如监听滚动，在Web端你需要在页面挂载时添加监听器，然后在页面卸载时去掉监听器，而在React Native你只需要直接将handler放到onScroll这个prop里就可以了。见下面例子：const App = () => { function load_more(){ console.log('end!') } function ScrollHandler(e){ console.log(e) } return ( <SafeAreaProvider> <SafeAreaView style={styles.container} edges={['top']}> <ScrollView style={styles.scrollView} onEndReached={load_more} onScroll={ScrollHandler}> <Text style={styles.text}> Long Text...... Long Text...... Long Text...... Long Text...... Long Text...... Long Text...... Long Text...... Long Text...... </Text> </ScrollView> </SafeAreaView> </SafeAreaProvider> ); }除此之外，你还可以设置水平滚动，甚至水平换页实现走马灯效果。ScrollView只是List最简单的一种方式，它会一次性渲染所有子节点，因此性能不好。这时，FlatList和SectionList就派上用场了，他们继承了ScrollView的几乎所有特征，并且性能更好。而FlatList是其中使用率最高的，它提供了numColumns属性，允许你轻松构建网格布局。而除了React Native本身提供的组件，对于大数据列表，你还可以使用第三方库FlashList或者RecyclerListView，来替代FlatList获得更好的性能。值得一提的是，FlashList除了是高性能列表，还提供了瀑布流布局的列表组件MasonryFlashList。说完列表，我们来讲一下React Native的触碰事件。在React Native你不能像在React Web端那样，随便一个地方都能设置onClick。并且React Native只有Press事件，你需要在特定的组件如Touchable、Pressable、Text、Button才能处理Press事件。其中Touchable组件分为TouchableHighlight、TouchableOpacity、TouchableWithoutFeedback，顾名思义他们分别对应触碰高亮、触碰改变透明度、触碰无反馈（触碰不改变样式）。而Press事件在Pressable和Text又分为Press和LongPress。<Pressable onPress={onPressFunction} onLongPress={onLongPressFunction}> <Text>I'm pressable!</Text> </Pressable>最后，想要写按钮和输入框，需要Button和TextInput组件，React Native的按钮自带样式比HTML的按钮要好看，并且安卓版点击按钮自带波纹效果。而React Native的输入框使用体验跟Web端的大体一样，就是提供props有些不同，这里就不多说了。本文到这里，已经将React Native跟React的主要区别过一遍了。由于篇幅问题，更多的内容以及细节就不详细展开了。之后我还会更更多React Native相关的文章，如果你对React Native感兴趣，欢迎在评论区交流讨论。