6. RN笔记-BUG记录

RN BUG记录

1. FlatList 上拉加载更多 , 重复调用

• 用一个flag来控制下拉到底后是否需要刷新
  • 当下拉到底部后, 触发 onEndReached , 如果flag为假, 不执行逻辑方法 , 否则执行
  • 当加载了数据后 , 会渲染数据到FlatList , 并触发``onContentSizeChange , 在此事件中将flag重新置true` , 表示可以加载了
• 如果使用了 ListFooterComponent属性 , 必须固定高度 , 不能自己计算高度 , 否则当ListFooterComponent中视图的高度变化后 , 也会触发onContentSizeChange 此时flag就失去了意义,
• 因为是列表的缘故 , 在调用获取数据的方法时 , 获取到的数据和原数据需要拼接展示, 如果使用了useCallback , 此时如果原数据一直是初始值 , 切记, 一定要把相关数据添加到useCallback的第二个参数中 , 来更新此方法

代码示例:

import React, { useCallback, useEffect, useMemo, useState } from "react";
let page:number = 1,canLoadMore:boolean = true;
function Test(){
    let [data,setData] = useState<any>([]);
  	let [loadMore,setLoadMore] = useState<"no-more"|"loading"|"load-more">("load-more");
    let getData = useCallback(()=>{
        fetch("/api/...").then(res=>{
          let temp = data.concat(res.data.list)
          let pageInfo = res.data.page;
          setData(temp);
          if (page >= pageInfo.pageCount){
            setLoadMore("no-more")
          }else setLoadMore("load-more")
        })
  	},[data]); // 这里将data作为该函数的更新依据
    useEffect(getData,[])
    // 渲染列表
    let renderRecords:any = useCallback((itemData:any)=>{
        let {item,index} = itemData;
        let {id,text} = item;
          return <Text key="id">{test}</Text>
      },[data]);
    // 加载更多
    let onLoadMore = useCallback(()=>{
        if (canLoadMore){
          canLoadMore = false;
          page ++ ;
          setLoadMore("loading")
          getData();
        }
      },[getData]) // 这里需要监听的是getData函数
    
    return <FlatList
      data={data}
      renderItem={renderRecords}
      ListFooterComponent={<LoadMore state={loadMore}/>} // 这个组件一定不能改变大小 , 否则会触发onContentSizeChange
      onEndReachedThreshold={0.01} // 这个值是列表中单项的比例 不是高度
      onEndReached={onLoadMore}
      onContentSizeChange={()=>canLoadMOre = true}
    />
}

2. 打包后无法发起网络请求

发起请求后报错: {line:103row:8224,sourceURL:“index.android.bundle”}

解决方法:

​ 在android/app/src/main/AndroidManifest.xml 中 添加代码:

​ android:usesCleartextTraffic="true"

<application
   android:name=".MainApplication"
   android:label="@string/app_name"
   android:icon="@mipmap/ic_launcher"
   android:roundIcon="@mipmap/ic_launcher_round"
   android:allowBackup="false"
   android:usesCleartextTraffic="true"
   android:theme="@style/AppTheme">
 ...
  <activity 
     ...
   >
 </activity>
            
</application>

如果以上方法还是不行 , 尝试运行以下命令:

react-native bundle --platform android --dev false --entry-file index.js --bundle-output android/app/src/main/assets/index.android.bundle --assets-dest android/app/src/main/res

如果还是不行 , 一般都是服务器的问题了(postman可能能走通 是因为postman是使用的data字符串拼接的模式,就算是post请求也是如此)

4. TouchableOpacity中 ScrollView 失效问题

解决办法: 在ScrollView 中再加一个 TouchableOpacity

<TouchableOpacity>
	<ScrollView>
 	<TouchableOpacity>
         <Text>
         	内容
         </Text>	
     </TouchableOpacity>
 </ScrollView>	
</TouchableOpacity>

5. 图片并排显示时 会出现间隙

解决办法:

当图片的宽度为奇数时, 并排显示会出现间隙的问题 , 容易被手机2k屏幕识别为占用了0.5px的空间，剩下0.5px的空间未必使用则表现为底色间隙，导致长图拼接出现空隙。

解决办法: 动态设置图片的宽高为偶数即可

如:

<Image source={{ uri: item.image }} style={{ width:winWidth % 2 === 1?winWidth-1:winWindth }} />