/**

* 如果系统看一遍RN相关官方文档，可能很快就忘记了。一味看文档也很枯燥无味，

* 于是大概看了关键文档后，想着直接开发一个Demo出来，边学边写，对往后工作

* 开发衔接上能够更顺。这期间肯定会遇到各种各样的问题，所以也算是一个积累

* 经验的小过程。

*/

        准备工作：直接在前面两篇笔记的项目基础上，然后随便找了个网易云游戏网页（在Google浏览器上打开调试模式，选择手机模式，网易云游戏网页正好有适配移动端）。

        网易云游戏：https://cg.163.com/#/game/recommend

        定个小目标，首先先看下四个模块原效果，当前项目本打算依赖Ant Design Mobile，看看不借助其他UI框架能碰到哪些问题。 

        打算将期间遇到的问题都记录下来，最后放上实际效果的视频或截图。

问题1:组件内如何使用React Navigation跳转页面？

在组件里直接拿不到navigation，当前做法是用React props组件传数据，将Home.tsx里的navigation向组件往下传。（# 那如果组件里的组件，嵌套N层呢，这个需要如何处理呢？我想有React/Vue开发经验的都晓得不能这样做，耦合太高了，而且维护起来还费头发#）

忘了补充一个小知识点，这里可以自行选择是否可空（使用时要安全判断调用），其他地方使用组件就不会强制要传参而报错

问题2:使用setInterval处理验证码倒计时，发现使用useState的倒计时一直60/59变化，不会往下更新，后面直接换成useRef ​​​​​​​

知识点x1:切换tab时，在ScrollView中如何获取元素位置并滚动到该位置，在官网中有LayoutEvent事件监听，通过onLayout可以获取到x、y、witdh、heigth属性（另外一种方式是通过measure实现，暂时还没去用）。当前Demo中需要获取的是垂直方向的坐标，所以只需拿到y属性值，然后调用scrollView.scrollTo函数。下面附上关键代码

// 绑定ScrollView

const scrollViewRef = useRef(null)

// tab布局

horizontal={true}

showsHorizontalScrollIndicator={false}

data={tabList}

renderItem={({ item, index }) =>

{

// 切换tab滚动到相应位置

scrollViewRef?.current?.scrollTo({ x: 0, y: positionList[index], animated: true })

setCurrentTab(() => item.tabId)

tabList.map(updateItem => {

tabList[updateItem.tabId].isSelected = item.tabId === updateItem.tabId

})

}}>

//tab布局}

/>

// ref引用

// onLayout监听坐标

{

let { x, y, width, height } = event.nativeEvent.layout;

console.log(x, y, width, height);

let list = positionList

list[1] = y

setPositionList(() => list)

}}>

这里再附上视频效果

react native scrollTo/onLayout

问题3:ScrollView(垂直滚动)内嵌套了FlatList(垂直滚动)，编译会有error，避免这种同方向滚动导致手势滑动出现异常。（做过安卓客户端的老哥们看到报错的意思应该能猜到个一二，安卓中NestScrollView嵌套RecyclerView出现手势滑动异常的问题）。特地验证了下，把FlatList的horizontal={true}设置为水平滚动，就不会报错了。所以只要设置相反方向就不会报错。

最后更新时间2024-02-08（有空会陆续记录在文章里...）

文章来源

评论可见，请评论后查看内容，谢谢！！！
 您阅读本篇文章共花了：