给Web开发者写的React Native简介,React Native与React的区别与对比(2)
本文我们继续之前的话题给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感兴趣,欢迎在评论区交流讨论。
0 人喜欢
暂无评论,来发布第一条评论吧!