Как дать загрузиться контенту?

Question

[Farazendasss]

Всем привет .Делаю мобильное приложение на React native. Получаю огромное количество фотографий с сервера и вывожу их списком в две колонки во FlatList. Вопрос : Как дать загрузиться всем фотографиям ,и уже потом отобразить компонент на экране.
На данный момент я делаю так

class App extends Component{

    state={
        loading: true
    }
    componentDidMount(){
        setTimeout(this.statusChange, 4000)
    }
    statusChange = () => {
        this.setState({
            loading:false
        })
    }


render(){
        if(this.state.loading){
            return <ActivityIndicator size="large" color="#BA5C06" style={styles.loading} />
        }
return(
<View><Text>Content<Text></View>
)
}
}

Но мне кажется что это костыль. Как правильно решить эту задачу ?

Answer 1

[Роман Александрович]

лучшее что вы можете сделать это использовать https://github.com/DylanVann/react-native-fast-image и показать прелодер для каждой загружаемой фотографии. Еще вы можете с помощью preload при старте приложения сразу преподрузить фотографии

Comments

[Farazendasss]

Хорошо,но данная проблема у меня еще как минимум на 2 скринах где много информации подгружается (слайдер изображений,карта,и текстовые данные) Вот когда захожу на страницу,данным надо секунды три что бы полностью отобразиться ,а именно карте и слайдеру. Я просто не совсем понимаю как составить условие в данной ситуации .Например пока что то равно чему то ,то отображать loading. Или так и делать через setTimeout ?

[Роман Александрович]

Farazendasss, на карту не нужно вапще ставить задержку. Обычно при попадании на карту она сама все сделает. что касается слайдера так вам нужно при старте приложения сразу преподгрузить картинки и по логике когда вы перейдете в слайдер они уже будут в кэше. У react-native-fast-image есть хэндлер который вызывается при подшрузке вы как раз за него и должны зацепиться.

Answer 2

[Robur]

Но мне кажется что это костыль. Как правильно решить эту задачу ?

поставить loading = false при начале загрузки картинок, и после загрузки поставить его в true. Как именно - зависит от того как вы их грузите.
так как загружаются они видимо где-то еще, то loading вам придется хранить в стейте приложения, а не компонента.

Comments

[Farazendasss]

Как понять что картинки уже загрузились ? Ведь массив изображений в самом начале уже не будет равен 0 ,но и еще не будет загружен полностью.

данная проблема у меня еще как минимум на 2 скринах где много информации подгружается (слайдер изображений,карта,и текстовые данные) Вот когда захожу на страницу,данным надо секунды три что бы полностью отобразиться ,а именно карте и слайдеру. Я просто не совсем понимаю как составить условие в данной ситуации .Например пока что то равно чему то ,то отображать loading. Или так и делать через setTimeout ?

[Robur]

Как понять что картинки уже загрузились ?

могу только повторить - зависит от того как вы их грузите. "получаю с сервера" не сильно информативно.

Там где вы их загружаете - там и можете понять. Не в компоненте. Массив анализировать не надо.