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 }} />