React-Native利用React Navigation实现页面跳转——很好的RN入门DEMO

本文介绍了一个React Native的入门示例,通过React Navigation实现页面间的跳转。功能包括:查看电影列表、按钮跳转和列表详情页展示。在练习中涉及props、state、样式、网络请求、触摸事件和Flexbox布局。注意事项提醒在长列表展示时使用List和FlatList组件以提高性能。在实际操作中遇到了_this3.pressToApp报错和navigation不存在的问题,并给出了相应的解决方案。示例包含app.js(首页)、ListScreen.js(列表页)和ProfileScreen.js(详情页)的实现。
摘要由CSDN通过智能技术生成

功能:

1、简单的查看电影demo

2、点击按钮跳转

3、点击列表页中的某一条跳转到相应详情页

页面:

首页=>电影列表页=>详情页

总结:

1、练习了props,state,样式,长列表,网络,触摸事件,Flexbox布局(学习资料:http://flexboxfroggy.com/

2、练习了使用导航器跳转页面 https://reactnative.cn/docs/navigation/

注意项:

1、ScrollView和长列表组件的区别

ScrollView适合用来显示数量不多的滚动元素。放置在ScollView中的所有组件都会被渲染,哪怕有些组件因为内容太长被挤出了屏幕外。如果你需要显示较长的滚动列表,那么应该使用功能差不多但性能更好的FlatList组件。

长类表组件包括:FlatList组件和SectionList组件

FlatList组件用于显示一个垂直的滚动列表,其中的元素之间结构近似而仅数据不同。更适于长列表数据,且元素个数可以增删。和ScrollView不同的是,FlatList并不立即渲染所有元素,而是优先渲染屏幕上可见的元素。

如果要渲染的是一组需要分组的数据,也许还带有分组标签的,那么SectionList

2、网络方面

a、能使用的方法有:Fetch、基于 XMLHttpRequest 封装的第三方库,例如frisbee或是axios等、WebSocket 

b、不能使用的方法: jQuery,因为 jQuery 中还使用了很多浏览器中才有而 RN 中没有的东西、不是所有 web 中的 ajax 库都可以直接使用

c、使用Fetch的时候不要忘记catch

catch((error) =>{
        console.error(error);
      })

d、网络请求天然是一种异步操作(译注:同样的还有asyncstorage,请不要再问怎样把异步变成同步!无论在语法层面怎么折腾,它们的异步本质是无法变更的。异步的意思是你应该趁这个时间去做点别的事情,比如显示 loading,而不是让界面卡住傻等ÿ

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值