·

给Web开发者写的React Native简介,React Native与React的区别与对比(2)

发布时间:2025-03-14 19:01:49阅读量:6
专业文章
转载请注明来源

本文我们继续之前的话题给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最简单的一种方式,它会一次性渲染所有子节点,因此性能不好。这时,FlatListSectionList就派上用场了,他们继承了ScrollView的几乎所有特征,并且性能更好。而FlatList是其中使用率最高的,它提供了numColumns属性,允许你轻松构建网格布局。

而除了React Native本身提供的组件,对于大数据列表,你还可以使用第三方库FlashList或者RecyclerListView,来替代FlatList获得更好的性能。值得一提的是,FlashList除了是高性能列表,还提供了瀑布流布局的列表组件MasonryFlashList

说完列表,我们来讲一下React Native的触碰事件。在React Native你不能像在React Web端那样,随便一个地方都能设置onClick。并且React Native只有Press事件,你需要在特定的组件如TouchablePressableTextButton才能处理Press事件。其中Touchable组件分为TouchableHighlightTouchableOpacityTouchableWithoutFeedback,顾名思义他们分别对应触碰高亮、触碰改变透明度、触碰无反馈(触碰不改变样式)。而Press事件在PressableText又分为Press和LongPress。

<Pressable onPress={onPressFunction} onLongPress={onLongPressFunction}>
  <Text>I'm pressable!</Text>
</Pressable>

最后,想要写按钮和输入框,需要ButtonTextInput组件,React Native的按钮自带样式比HTML的按钮要好看,并且安卓版点击按钮自带波纹效果。而React Native的输入框使用体验跟Web端的大体一样,就是提供props有些不同,这里就不多说了。

本文到这里,已经将React Native跟React的主要区别过一遍了。由于篇幅问题,更多的内容以及细节就不详细展开了。之后我还会更更多React Native相关的文章,如果你对React Native感兴趣,欢迎在评论区交流讨论。

0 人喜欢

评论区

暂无评论,来发布第一条评论吧!

弦圈热门内容

Loring W Tu微分几何教材:Differential Geometry Connections, Curvature, and Characteristic Classes

在上帖Loring W Tu微分几何经典入门教材:An Introduction to Manifolds中,我提到高中时期,我为了看懂Jürgen Jost的几何分析教材Riemannian Geometry and Analysis,转而看Loring W Tu的An Introduction to Manifolds以及Differential Geometry Connections, Curvature, and Characteristic Classes。这本教材可以说是An Introduction to Manifolds的后续,建议先看一下An Introduction to Manifolds有了流形的基础,再看这本Connections, Curvature, and Characteristic Classes。本书开始就直接先从黎曼流形开始讲起,接着就讲曲率、联络这些微分几何进阶的重要基本概念。这也是为什么当初我会选择看这本书,因为这些内容刚好有助于我理解Riemannian Geometry and Analysis这本教材的内容(记得当时看到测地线就看不 ...

素数在整数整环中还是素的吗?

我的提问:一个整环$R$中的元素$p$是素的,如果$p$不是零或者一个单元,并且$p|ab$意味着$p|a$或者$p|b$(等价的$ab\in Rp$意味着$a \in Rp$或者$b\in Rp$)。一个整环$R$的元素$q$是不可约的,当$q$不是零或者一个单元,并且$q = ab$意味着$a$或$b$是一个单元。那么素数在整数整环中是素的吗?然后素数都是不可约的吗?回答1:这两个问题的都是对的。根据基础数论的事实,$\pm 1$是唯一可逆的整数,除$\pm 1$以外的整数可以唯一地表示为不同素数的乘积加上$\pm$,每个素数的幂都是正整数,这两个结果都很容易得到。回答2:素数在整数整环中既是素的,也是不可约的。根据定义,它们就是不可约的。为了证明它们是素的,请回顾一下欧几里得算法,该算法用于找到两个整数的GCD(并同时证明任意两个整数都有一个在等价意义下唯一的GCD,其中并不涉及素数的分解)。根据欧几里德算法可以得出,如果$d=\gcd(a,b)$对两个整数$a,b\in\mathbb Z$,则存在整数$u,v\in\mathbb Z$使得$d=ua+vb$。(贝祖特性。)现在, ...

2024-11-22凌晨:弦圈最近两周更新情况

在上篇弦圈11月10日上下更新计划:小金库、打赏等功能,我提到会更新网站多个功能。原本以为这些功能最多一周就能全部写完,结果当我真正开始写,才发现自己完全低估了这些功能实现的难度,以及所需要耗费的时间。而且由于我的完美主义倾向,导致我比原计划多开发了好几个功能,比如说编辑器插入公式、交易中心、收藏党最喜爱的收藏夹等。因为我想反正都大更新了,那干脆就更新得多一些,把以前埋的坑都填上。再然后支付功能比我想象中的要难得多,这不仅仅指代码难写,还包括支付宝的审核等问题,人事问题上也耗费了不少时间。在这里忍不住吐槽一下支付宝和微信支付,这国内两家巨头技术文档写的是真烂、真水。多少年了,支付宝支付SDK的demo示例还是Java、PHP,Python压根没写,只能自己摸索然后网上找到些零散的资料。微信支付先是需要微信认证强制每年收费300元,然后文档也是写得不清不楚。反正目前网站就暂时只支持支付宝吧,之后再把微信支付补上吧,因为真的被恶心到了。总之如今写了快两个星期了,这些功能终于要完成了,预计明后天就能上线测试。网站也完全没更新,也找不到人帮忙更新,只能先放着了。之后我会发一篇更新日志,更加详细 ...

弦圈11月10日上下更新计划:小金库、打赏等功能

这几天忙于写代码完善网站功能,不太有空更新文章和内容。因为弦圈没有借助任何建站工具和博客框架,是我自己前后端一起从零开始写的,因此开发得会比较慢,请谅解。。。目前计划上线功能首先就包括,前面弦圈更新日志:关于智力值和金币提到的小金库。获取金币的机制是:智力值存入银行(叫时空银行time bank?),然后根据日利率每天产生相应的金币。下图为测试画面其次为了让网站能够更好的运作下去,从而给大家提供更好的服务,我计划引入盈利功能。所谓盈利功能即是用户通过弦圈来获得收益的相关功能,包括打赏功能、接广告功能、接悬赏功能。这些功能主要是为了鼓励大家为社区做贡献,并且让需要得到帮助的人更容易获得帮助(毕竟大佬们忙得很,不会轻易帮助你解决问题)。具体规则暂定如下:想要让弦圈的用户能赚钱,那弦圈必须自己先能赚到钱,目前我计划引入弦圈广告和用户交易中心。至于弦圈广告,我打算采用信息流广告、侧边栏广告、文章内嵌广告,拒绝弹窗之类遮蔽视线的广告,因此不会影响用户体验。最后我还得把之前留的坑——创作中心给填上,就是一个给创作者的方便管理内容、查看数据的模块。测试画面如下:尽情期待😇

Grothendieck经典著作:代数几何原理EGA 1(1971第二版)法语+英译

在前面几贴中,我已经分别分享了Grothendieck的代数几何三部曲EGA、SGA、FGA,链接如下:代数几何教皇Grothendieck经典著作:代数几何原理EGA法语原版全系列(1)代数几何教皇Grothendieck经典著作:代数几何讨论班SGA法语原版全系列代数几何教皇Grothendieck经典著作:代数几何基础FGA法语原版+英文译版但其实EGA 1还有1971年的第二版,Grothendieck在EGA 1第二版中更新了一些内容,因此一些概念定义会与第一版中有出入。原本我也是不太知道EGA竟然还会有第二版,直到后来有次看文献时,发现作者引用了EGA 1(1971)才知道有这一版本。对比EGA 1第一版跟第二版,感觉第二版要比第一版更好读一些,似乎思路行文更清晰,也更好理解。并且值得开心的是,EGA 1第二版有完整英译,现在我全都分享出来。

史上最年轻菲尔兹奖得主Serre的经典作品:代数凝聚层Faisceaux algébriques cohérents

法国数学家让-皮埃尔·塞尔(Jean Pierre Serre)是迄今为止最年轻的菲尔兹奖得主,他获奖时年仅27岁,被国际数学领域誉为“在世最伟大”的数学家之一,他在代数拓扑学、多复变函数论、代数几何与数论方面取得了开创性的、历史性的巨大贡献。 Serre与被誉为代数几何的上帝的Grothendick是亲密无间的学术伙伴,他们两个的数学风格可以说是截然相反的,相较于Grothendick更喜欢构造宏大的理论,Serre更喜欢解决具体的问题。而两者的合作碰撞出了无数的火花,诞生了无数经典的理论。具体可见 明星崛起 - 宛如来自空无的召唤。而代数凝聚层(Faisceaux algébriques cohérents)这本书是Serre的经典著作之一,讲述的是层论方法在代数几何中的应用。本书原版是法语写的,后来被翻译成中英文版本。现在我将自己收藏已久的中英法三个版本,都分享出来给有需要的人,欢迎感兴趣的收藏收藏!PS:第一个附件为法语版,第二个为英语版,第三个为中文版。

记录一下:弦圈在知乎正当宣传遭遇被恶意举报?

记录一下昨天在知乎上遇到的离谱事情,我的一个回答无端端的被删除了,很有可能是因为推广网站导致得罪了某些人,从而举报我垃圾广告。当然也有朋友说,这其实就是知乎因为我引流所以封我,这确实不好说。最后申诉也没用,只能说这真的离谱到家了。我回答的提问是《有哪些网站比较有深度?》,正常理解这问题就是要你推荐网站的,那我推荐自己的网站,带上链接,多说几句介绍一下,不是很合理吗?我的回答可以说完全契合这个问题,甚至说该问题就是给我这种想要推广的人量身定做的。如果说我是因为在别的毫不相干的问题下,强行推广我的网站,那删我还情有可原。结果我发了那么多个回答,偏偏这个最不可能的。我想是不是因为那个提问是广告提问,回答是广告回答,所以我宣传了导致强了别人的风头。但我查了查问问题的人跟回答问题的不是同一个,而且网站名都似乎是大网站,还不至于这样,只能说遇到一些“不认同数学网站是有深度网站”的人吧😅以下是我当晚发在知乎的原文。这几天,我在知乎加大了弦圈 弦圈 - 找到属于你的圈子 (manitori.xyz) 的宣传力度,但也不是像生产电子垃圾那样胡乱安插广告。每个回答,我都认真看、认真写的,并且保证回答跟问题 ...