关于react-native:Reactnative-开发小技巧

1. isFocused

咱们晓得对于 App 来说，对于页面的跳转不像 PC 端，Pc 端如果跳转页面，则上一个页面会卸载，APP 则不然，它是一个页面盖在另一个页面下面，怎么了解呢，就是以后页面盖在上一个页面上。
那这个个性也就会导致咱们开发的时候须要去思考躲避二件事：
1. 页面不会卸载，返回的时候，不会从新申请页面
2. 或者说有的是高耗费的页面不在以后页面了，也会始终在耗费手机性能
这时候就要隆重介绍一个新的属性了：isFocused
这个属性能够让咱们得悉：是否在以后页面，如果是：true, 否则就是 false
长话短说间接上代码：

1. 解决返回页面不会刷新的问题

   import {useIsFocused} from "@react-navigation/native";
   const isFocused = useIsFocused()
   useEffect(()=>{if(isFocused){getListData()
    }
   },[isFocused])

2. 解决不在高耗费页面，还在耗费

   isFocused && (<Camera onCodeRead={(code)=>{const url = parse(code);
      navigate('WebScreen',{uri:url})
     }}/>
     )

2.react-native flex 布局

个别咱们应用 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

<View style={{
    width:cellWidth,
    height:cellHeight,
    backgroundColor:"blue"
}} />

例子二:

alignSelf 不听从父元素的排列规定，按本人的规定来

<View style={{
    width:cellWidth,
    height:cellHeight,
    backgroundColor:"blue",
    alignSelf:'flex-end',
}} />