关于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',
}} />

【腾讯云】云产品限时秒杀,爆款1核2G云服务器,首年50元

阿里云限时活动-2核2G-5M带宽-60G SSD-1000G月流量 ,特惠价99元/年(原价1234.2元/年,可以直接买3年),速抢

本文由乐趣区整理发布,转载请注明出处,谢谢。

您可能还喜欢...

发表评论

您的电子邮箱地址不会被公开。

此站点使用Akismet来减少垃圾评论。了解我们如何处理您的评论数据