1. isFocused
我们知道对于App来说，对于页面的跳转不像PC端，Pc端如果跳转页面，则上一个页面会卸载，APP则不然，它是一个页面盖在另一个页面上面，怎么理解呢，就是当前页面盖在上一个页面上。
那这个特性也就会导致我们开发的时候需要去考虑规避二件事：
1.页面不会卸载，返回的时候，不会重新请求页面
2.或者说有的是高消耗的页面不在当前页面了，也会一直在消耗手机性能
这时候就要隆重介绍一个新的属性了：isFocused
这个属性可以让我们得知：是否在当前页面，如果是：true,否则就是false
长话短说直接上代码：
- 解决返回页面不会刷新的问题
import {useIsFocused} from "@react-navigation/native"; const isFocused = useIsFocused() useEffect(()=>{ if(isFocused){ getListData() } },[isFocused])
- 解决不在高消耗页面，还在消耗
isFocused && ({ const url = parse(code); navigate('WebScreen',{uri:url}) }}/> )
一般我们使用flex布局的主轴是row，但是在react-native中主轴是column
为什么会是这样呢，因为手机横屏没有竖屏长，react-native才故意这样设计的。下面的例子是兼容性的展示九宫格，每行三个。
例子1
文章图片
在移动端页面获取屏幕的宽度一般是vw,vh,但是在RN中则是这样的：
import {Dimensions} from 'react-native'
const {width:screenWidth,height:screenHeight} = Dimensions.get('window')
export {screenHeight,screenWidth};
然后设置间隙和每个盒子的宽高：
整屏幕的宽度 - 两边的padding - 头像的宽度-头像右侧的宽度-两个间隙
let cellGap = 5;
let cellWidth = (screenWidth - 10*2-32-10-cellGap*2)/3例子二:
文章图片
【React-native 开发小技巧】alignSelf 不遵从父元素的排列规则，按自己的规则来
推荐阅读
- Luna（你想要的 React Native 调试工具）
- React Native无感升级在满帮集团的实践
- react-native 打包apk步骤
- vscode reacntive运行安卓真机
- React Native新架构剖析
- node.js清理缓存，AmbiguousModuleResolutionError
- React-Native|[RN]为什么要带上 abiFilters ＂armeabi-v7a＂, ＂x86＂