точек по краям экрана с заданной границей. Сделал с помощью Flatlist, View и position:'absolute'. До 60 цикл работает нормально, после 60 тоже справляется, но выдаёт предупреждение: Maximum update depth exceeded. This can happen when a component calls setState inside useEffect, but useEffect either doesn't have a dependency array, or one of the dependencies changes on every render.%s, а после 100 - совсем виснет. Показатели могут меняться в зависимости от мощности телефона. Попробовал кучу советов из инета, но не помогает ничего. Может через for лучше сделать? Работал с ним как-то, он 1000 View без подвисаний выводил.
Вот код:
export default function Astral (){
const widthScreen=Dimensions.get('window').width//ширина экрана
const heightScreen=Dimensions.get('window').height//высота экрана
const identationSize=30//размер отступа(РО)
const kamma=60//количество точек
const [count,setCount]=useState(0)
const[timeData,setTimeData]=useState([])//временная база хранения пикселей
const [release,setRelease]=useState()
const randXY = () => {
let counter=Math.floor((Math.random() * 4)+1 )
let randomX,randomY
if(counter==1){//1 левая колонка:отступ слева:0,отступ сверху:0,ширина:РО, высота:экран
randomX=Math.floor(Math.random() * identationSize)//от 0 до РО
randomY=Math.floor(Math.random() * heightScreen)//от 0 до высоты
}
else if(counter==2){//2 верхняя колонка: отступ слева:0,отступ сверху:0,ширина: экран, высота:РО
randomX=Math.floor(Math.random() * widthScreen)//от 0 до ширины
randomY=Math.floor(Math.random() * identationSize)//от 0 до РО
}
else if(counter==3){//3 правая колонка: отступ слева:ширина_экрана-РО,отступ сверху:0,ширина:РО,высота:экран
const leftOt=widthScreen-identationSize//отступ:ширина экрана - РО
randomX=Math.floor((Math.random() * identationSize)+leftOt)//от 0 до РО, плюс ширина - РО
randomY=Math.floor(Math.random() * heightScreen)//от 0 до высоты
}
else if(counter==4){//4 нижняя колонка: отступ слева:0,отступ сверху:высота_экрана-РО, ширина:экран,высота:РО
randomX=Math.floor(Math.random() * widthScreen)//от 0 до ширины
const topOt=heightScreen-identationSize//отступ:высота-РО
randomY=Math.floor((Math.random() * identationSize)+topOt)//от 0 до РО, плюс высота-РО
}
let dataM=[{'id':count+1,'left_c':randomX, 'top_c':randomY}]//собираем массив
setTimeData([...timeData, ...dataM])//скрепляем с другими
if(count==kamma){
setRelease(<FlatList
data={timeData}
contentContainerStyle={{ flexGrow: 1}}
stickyHeaderIndices={[0]}
ListHeaderComponent={<View></View>}
renderItem={({item}) =>
<View style={{flex:1,position:'absolute',width:3,height:3,borderRadius:50,backgroundColor:'red',
marginLeft:item.left_c,
marginTop:item.top_c,}}>
</View>}
keyExtractor={item => item.id}
/>)
}
}
useEffect(()=>{
if(count<=kamma){
randXY()
setCount((count)=>count + 1)
}
})
return (
<SafeAreaView style={styles.container}>
{release}
</SafeAreaView>
)
};
const styles = StyleSheet.create({
container: {
flex: 1,
backgroundColor:'#000',
},
fadingContainer: {
width:20,
height:20
},
});
Вот как выше тебе написали
Не, так он вообще ничего не выводит.
Обсуждают сегодня