react-native-largelist
react-native-largelist copied to clipboard
bolan9999
Large list and water fall both slow to update items
1: Dev Operating System window 10
2: Target OS android 11 inifnix note 10 , redemi note 8 android 10, samsumg A51 android 11, samsung j2 android 8
3: real device
4: package.json
"react-native": "0.64.2",
"react-native-spring-scrollview": "^3.0.1-rc.5",
"react-native-largelist-v3": "^3.1.0-rc.1",
5.
DocumentScreen.js
import React, {useEffect, useState} from 'react'
import {SafeAreaView,View, StyleSheet, Platform} from 'react-native'
import {WaterfallList } from 'react-native-largelist-v3'
import {useSelector, useDispatch} from 'react-redux';
import Item from '../components/DocumentItem'
import { BUTTONRADIUS, COLORS, FONTS } from '../constants';
const DocumentScreen = () => {
const {allconverteddocuments} = useSelector(state => state.ConvertedDocumentsReducer)
const [data, setData] = useState([])
useEffect(() => {
getfiledetails(allconverteddocuments).then((data) => {
setData(data)
})
},[])
const renderItem = (item, index) => (
<Item item={item} />
)
return(
<View style={styles.mainView}>
<SafeAreaView>
<WaterfallList
data={data}
bounces={false}
numColumns={1}
renderItem={renderItem}
heightForItem={() => 70}
/>
</SafeAreaView>
</View>
)
}
export default DocumentScreen;
const styles = StyleSheet.create({
mainView: {
backgroundColor:"#ffffff",
flexGrow:1
},
RowView:{
backgroundColor:"#eee",
paddingVertical:5,
marginHorizontal:5,
alignItems:"center",
paddingHorizontal:20 ,
marginVertical:5,
borderRadius:BUTTONRADIUS.medium,
elevation: 4,
},
nameText:{
color:COLORS.lightblack,
fontFamily:FONTS.medium
},
typeText:{
color:COLORS.gray,
fontSize:12,
fontFamily:FONTS.regular
}
})
DocumentItem.js
import React, {useState,memo, useCallback} from 'react'
import {Text, StyleSheet, TouchableOpacity, } from 'react-native'
import { Col, Row, Grid } from "react-native-easy-grid";
import Share from 'react-native-share';
import WORDICON from '../assets/ppticon.svg'
import MaterialCommunityIcons from 'react-native-vector-icons/MaterialCommunityIcons'
import {getfilesize, getdate} from '../services'
import { BUTTONRADIUS, COLORS, FONTS, SCREENS, width } from '../constants';
import * as RootNavigation from '../navigations/Rootnavigator'
import Dialog from "react-native-dialog";
import Menu, {
MenuProvider,
MenuOptions,
MenuOption,
MenuTrigger,
} from 'react-native-popup-menu';
const Item = ({ item }) => {
const [state, setState] = useState(false)
const [isModalVisible, setModalVisible] = useState(false);
const [deleteModal, setDeleteModal] = useState(false)
const [rename , setRename] = useState("")
const onOptionSelect = (value) => {
if(value == "openfile"){
openFile();
}else if(value == "sharefile"){
ShareFile()
}else if(value == "rename"){
RenameFile()
}else if(value == "delete"){
DeleteFileFunction()
}
setState(false);
}
const openFile = () => {
RootNavigation.navigate(SCREENS.VIEWPDFSCREEN, {path:item.path})
}
const ShareFile = useCallback(function () {
Share.open({
url: `file://${item.path}`,
type: 'application/pdf',
}).then((result) => {
console.log(result)
}).catch((err) =>{
if(err.message == "User did not share"){
}else{
alert('Some Error Occured please try again');
}
});
}, []);
const RenameFile = () => {
setModalVisible(true)
}
const onTriggerPress = () => {
setState(true);
}
const onBackdropPress = () => {
setState(false);
}
const RenameFileFunction = () => {
setModalVisible(false)
}
const DeleteFileFunction = () => {
setDeleteModal(!deleteModal)
}
return (
<Grid>
<Row style={styles.RowView}>
<Col size={1}>
<WORDICON width={40} height={40} />
</Col>
<Col size={4.5} style={{paddingVertical:10,}}>
<Row style={{justifyContent:"space-between", width:width}}>
<Col size={10}>
<Text numberOfLines={1} style={styles.nameText} >{item.filename}</Text>
</Col>
</Row>
<Row>
<Col size={1}>
<Text style={styles.typeText} >{getfilesize(item.size)}</Text>
</Col>
<Col size={2}>
<Text style={styles.typeText}>{getdate(item.lastModified)}</Text>
</Col>
</Row>
</Col>
<Col size={.7} style={{justifyContent:"center", alignItems:"flex-end"}}>
<Menu
opened={state}
onBackdropPress={() => onBackdropPress()}
onSelect={value => onOptionSelect(value)}>
<MenuTrigger >
<TouchableOpacity onPress={() => onTriggerPress()}>
<MaterialCommunityIcons name={"dots-vertical"} size={26} />
</TouchableOpacity>
</MenuTrigger>
<MenuOptions
style={styles.menuView}
optionsContainerStyle={styles.menuView}>
<MenuOption value={"openfile"} style={styles.menuOptionsStyle}>
<MaterialCommunityIcons name={"file-pdf"} size={16} color={COLORS.lightblack}/>
<Text style={{...styles.menuText, marginLeft:5,}}>Open File</Text>
</MenuOption>
<MenuOption value={"sharefile"} style={styles.menuOptionsStyle}>
<MaterialCommunityIcons name={"share-variant"} size={16} color={COLORS.lightblack}/>
<Text style={{...styles.menuText, marginLeft:5,}}>Share File</Text>
</MenuOption>
<MenuOption value={"rename"} style={styles.menuOptionsStyle}>
<MaterialCommunityIcons name={"rename-box"} size={16} color={COLORS.lightblack}/>
<Text style={{...styles.menuText, marginLeft:5,}}>Rename</Text>
</MenuOption>
<MenuOption value={"delete"} style={styles.menuOptionsStyle}>
<MaterialCommunityIcons name={"delete"} size={16} color={COLORS.danger}/>
<Text style={{...styles.menuText,color:COLORS.danger, marginLeft:5,}}>Delete</Text>
</MenuOption>
</MenuOptions>
</Menu>
</Col>
</Row>
<Dialog.Container visible={isModalVisible}>
<Dialog.Title>Rename File</Dialog.Title>
<Dialog.Description>
Please Enter File Name
</Dialog.Description>
<Dialog.Input
value={rename}
onChangeText={(text) => setRename(text)}
/>
<Dialog.Button label="Cancel" style={{color:"red"}} onPress={() => setModalVisible(false)} />
<Dialog.Button label="OK" onPress={() => RenameFileFunction()} />
</Dialog.Container>
<Dialog.Container visible={deleteModal}>
<Dialog.Title>Delete File</Dialog.Title>
<Dialog.Description>
Are Your Sure
</Dialog.Description>
<Dialog.Button label="Cancel" onPress={() => setDeleteModal(false)} />
<Dialog.Button label="OK" style={{color:"red"}} onPress={() => DeleteFileFunction()} />
</Dialog.Container>
</Grid>
)}
export default memo(Item) ;
const styles = StyleSheet.create({
mainView: {
backgroundColor:"#ffffff",
flexGrow:1
},
RowView:{
backgroundColor:"#eee",
marginHorizontal:5,
alignItems:"center",
paddingHorizontal:10 ,
marginVertical:5,
borderRadius:BUTTONRADIUS.medium,
elevation: 4,
},
nameText:{
color:COLORS.lightblack,
fontFamily:FONTS.medium
},
typeText:{
color:COLORS.gray,
fontSize:12,
fontFamily:FONTS.regular
},
menuText:{
color:COLORS.lightblack,
fontSize:12,
fontFamily:FONTS.regular
},
menuView:{
backgroundColor:"#fff",
maxWidth:100,
borderRadius:10
},
menuOptionsStyle:{
paddingHorizontal:10,
paddingVertical:5,
borderBottomWidth:0,
flexDirection:"row",
}
})
tried this with memo and without memo but same result
Here is a sample video
https://user-images.githubusercontent.com/34965107/129177152-cfb498f0-1e22-49cd-a941-1e58577ff466.mp4
It seems that your item is too complicated. LargeList is reused component to resolve black screen problem when moving too fast.
确实存在这个问题
另外想请问下FlatList 对应的是 WaterfallList组件, SectionList 对应的是 LargeList 是吗，
确实存在这个问题 另外想请问下
FlatList对应的是WaterfallList组件,SectionList对应的是LargeList是吗，
不是，LargeList相当于SectionList，WaterfallList是瀑布流组件
1: Dev Operating System window 10
2: Target OS
android 11 inifnix note 10,redemi note 8 android 10,samsumg A51 android 11,samsung j2 android 83: real device4: package.json
"react-native": "0.64.2", "react-native-spring-scrollview": "^3.0.1-rc.5", "react-native-largelist-v3": "^3.1.0-rc.1",5.
DocumentScreen.js
import React, {useEffect, useState} from 'react' import {SafeAreaView,View, StyleSheet, Platform} from 'react-native' import {WaterfallList } from 'react-native-largelist-v3' import {useSelector, useDispatch} from 'react-redux'; import Item from '../components/DocumentItem' import { BUTTONRADIUS, COLORS, FONTS } from '../constants'; const DocumentScreen = () => { const {allconverteddocuments} = useSelector(state => state.ConvertedDocumentsReducer) const [data, setData] = useState([]) useEffect(() => { getfiledetails(allconverteddocuments).then((data) => { setData(data) }) },[]) const renderItem = (item, index) => ( <Item item={item} /> ) return( <View style={styles.mainView}> <SafeAreaView> <WaterfallList data={data} bounces={false} numColumns={1} renderItem={renderItem} heightForItem={() => 70} /> </SafeAreaView> </View> ) } export default DocumentScreen; const styles = StyleSheet.create({ mainView: { backgroundColor:"#ffffff", flexGrow:1 }, RowView:{ backgroundColor:"#eee", paddingVertical:5, marginHorizontal:5, alignItems:"center", paddingHorizontal:20 , marginVertical:5, borderRadius:BUTTONRADIUS.medium, elevation: 4, }, nameText:{ color:COLORS.lightblack, fontFamily:FONTS.medium }, typeText:{ color:COLORS.gray, fontSize:12, fontFamily:FONTS.regular } })DocumentItem.js
import React, {useState,memo, useCallback} from 'react' import {Text, StyleSheet, TouchableOpacity, } from 'react-native' import { Col, Row, Grid } from "react-native-easy-grid"; import Share from 'react-native-share'; import WORDICON from '../assets/ppticon.svg' import MaterialCommunityIcons from 'react-native-vector-icons/MaterialCommunityIcons' import {getfilesize, getdate} from '../services' import { BUTTONRADIUS, COLORS, FONTS, SCREENS, width } from '../constants'; import * as RootNavigation from '../navigations/Rootnavigator' import Dialog from "react-native-dialog"; import Menu, { MenuProvider, MenuOptions, MenuOption, MenuTrigger, } from 'react-native-popup-menu'; const Item = ({ item }) => { const [state, setState] = useState(false) const [isModalVisible, setModalVisible] = useState(false); const [deleteModal, setDeleteModal] = useState(false) const [rename , setRename] = useState("") const onOptionSelect = (value) => { if(value == "openfile"){ openFile(); }else if(value == "sharefile"){ ShareFile() }else if(value == "rename"){ RenameFile() }else if(value == "delete"){ DeleteFileFunction() } setState(false); } const openFile = () => { RootNavigation.navigate(SCREENS.VIEWPDFSCREEN, {path:item.path}) } const ShareFile = useCallback(function () { Share.open({ url: `file://${item.path}`, type: 'application/pdf', }).then((result) => { console.log(result) }).catch((err) =>{ if(err.message == "User did not share"){ }else{ alert('Some Error Occured please try again'); } }); }, []); const RenameFile = () => { setModalVisible(true) } const onTriggerPress = () => { setState(true); } const onBackdropPress = () => { setState(false); } const RenameFileFunction = () => { setModalVisible(false) } const DeleteFileFunction = () => { setDeleteModal(!deleteModal) } return ( <Grid> <Row style={styles.RowView}> <Col size={1}> <WORDICON width={40} height={40} /> </Col> <Col size={4.5} style={{paddingVertical:10,}}> <Row style={{justifyContent:"space-between", width:width}}> <Col size={10}> <Text numberOfLines={1} style={styles.nameText} >{item.filename}</Text> </Col> </Row> <Row> <Col size={1}> <Text style={styles.typeText} >{getfilesize(item.size)}</Text> </Col> <Col size={2}> <Text style={styles.typeText}>{getdate(item.lastModified)}</Text> </Col> </Row> </Col> <Col size={.7} style={{justifyContent:"center", alignItems:"flex-end"}}> <Menu opened={state} onBackdropPress={() => onBackdropPress()} onSelect={value => onOptionSelect(value)}> <MenuTrigger > <TouchableOpacity onPress={() => onTriggerPress()}> <MaterialCommunityIcons name={"dots-vertical"} size={26} /> </TouchableOpacity> </MenuTrigger> <MenuOptions style={styles.menuView} optionsContainerStyle={styles.menuView}> <MenuOption value={"openfile"} style={styles.menuOptionsStyle}> <MaterialCommunityIcons name={"file-pdf"} size={16} color={COLORS.lightblack}/> <Text style={{...styles.menuText, marginLeft:5,}}>Open File</Text> </MenuOption> <MenuOption value={"sharefile"} style={styles.menuOptionsStyle}> <MaterialCommunityIcons name={"share-variant"} size={16} color={COLORS.lightblack}/> <Text style={{...styles.menuText, marginLeft:5,}}>Share File</Text> </MenuOption> <MenuOption value={"rename"} style={styles.menuOptionsStyle}> <MaterialCommunityIcons name={"rename-box"} size={16} color={COLORS.lightblack}/> <Text style={{...styles.menuText, marginLeft:5,}}>Rename</Text> </MenuOption> <MenuOption value={"delete"} style={styles.menuOptionsStyle}> <MaterialCommunityIcons name={"delete"} size={16} color={COLORS.danger}/> <Text style={{...styles.menuText,color:COLORS.danger, marginLeft:5,}}>Delete</Text> </MenuOption> </MenuOptions> </Menu> </Col> </Row> <Dialog.Container visible={isModalVisible}> <Dialog.Title>Rename File</Dialog.Title> <Dialog.Description> Please Enter File Name </Dialog.Description> <Dialog.Input value={rename} onChangeText={(text) => setRename(text)} /> <Dialog.Button label="Cancel" style={{color:"red"}} onPress={() => setModalVisible(false)} /> <Dialog.Button label="OK" onPress={() => RenameFileFunction()} /> </Dialog.Container> <Dialog.Container visible={deleteModal}> <Dialog.Title>Delete File</Dialog.Title> <Dialog.Description> Are Your Sure </Dialog.Description> <Dialog.Button label="Cancel" onPress={() => setDeleteModal(false)} /> <Dialog.Button label="OK" style={{color:"red"}} onPress={() => DeleteFileFunction()} /> </Dialog.Container> </Grid> )} export default memo(Item) ; const styles = StyleSheet.create({ mainView: { backgroundColor:"#ffffff", flexGrow:1 }, RowView:{ backgroundColor:"#eee", marginHorizontal:5, alignItems:"center", paddingHorizontal:10 , marginVertical:5, borderRadius:BUTTONRADIUS.medium, elevation: 4, }, nameText:{ color:COLORS.lightblack, fontFamily:FONTS.medium }, typeText:{ color:COLORS.gray, fontSize:12, fontFamily:FONTS.regular }, menuText:{ color:COLORS.lightblack, fontSize:12, fontFamily:FONTS.regular }, menuView:{ backgroundColor:"#fff", maxWidth:100, borderRadius:10 }, menuOptionsStyle:{ paddingHorizontal:10, paddingVertical:5, borderBottomWidth:0, flexDirection:"row", } })tried this with memo and without memo but same result
Here is a sample video
20210812_144335.mp4
我在尝试使用reanimated重新写LargeList的新版本。
确实存在这个问题 另外想请问下
FlatList对应的是WaterfallList组件,SectionList对应的是LargeList是吗，不是，LargeList相当于SectionList，WaterfallList是瀑布流组件
FlatList 大列表使用您的那个组件比较合适呢？