Создание компонента изображения с асинхронной загрузкой в React Native

Создание компонента изображения с асинхронной загрузкой в React Native - Часть I

Научитесь создавать визуально привлекательный компонент изображения загрузки для React Native в этой серии статей, посвященной созданию компонента асинхронного изображения в React Native, анимации и прогрессивных изображениях.

Хорошая практика при создании пользовательского интерфейса - отображать заполнитель вместо изображения, пока оно загружается из сети. Благодаря этому наши приложения быстрее воспринимаются пользователем и избавляются от фоновых задач, чтобы они могли достичь своих целей.

В первой части этой серии статей вы создадите компонент React Native, который будет отображать заполнитель цвета, который будет заменен сетевым изображением после его загрузки из сети.

Перейти к источнику

Скромное начало

Для создания этого компонента нам понадобятся два представления контейнера, одно для заполнителя, а другое для изображения. Когда изображение загружается, мы хотим удалить заполнитель из представления, содержащего их.

Мы делаем это, устанавливая состояние для компонента, которое позволит заполнителю отображать условно, наблюдая за свойством onLoad изображения. Кроме того, нам потребуется свойство для цвета заполнителя и установить resizeMode изображения, чтобы он содержал так, чтобы изображение масштабировалось в соответствии с размером.

class AsyncImage extends Component {
  
  constructor(props: Props) {
    super(props)
    this.state = { loaded: false }
  }
  render() {
    const { 
      source, 
      placeholderColor 
    } = this.props
    return (
      <View>
        <Image
          source={source}
          resizeMode={'contain'}
          onLoad={this._onLoad} />
        {!this.state.loaded &&
          <View
            style={{
              backgroundColor: placeholderColor
            }} />
      </View>
    )
  }
  _onLoad = () => {
    this.setState(() => ({ loaded: true }))
  }
}

Размещение компонентов

Один из эффективных способов разместить два компонента друг над другом - это иметь требования к стилю высоты и ширины (мы добавляем требования с потоком в наших проектах), а затем передавать эти стили каждому компоненту, включая контейнер. Затем заполнитель и изображение будут расположены абсолютно так, чтобы они лежали друг на друге.

Этот метод позволяет компоненту работать практически с любым гибким или абсолютно позиционированным макетом.

render() {
  const {
    placeholderColor,
    style,
    source
  } = this.props
  return (
    <View
      style={style}>
      <Image
        source={source}
        resizeMode={'contain'}
        style={[
          style,
          {
            position: 'absolute',
            resizeMode: 'contain'
          }
        ]}
        onLoad={this._onLoad} />
      {!this.state.loaded &&
        <View
          style={[
            style,
            {
              backgroundColor: placeholderColor,
              position: 'absolute'
            }
        ]} />
      }
  
    </View>
  )
}

Определив это, мы будем использовать наш компонент AsyncImage для создания демонстрации в верхней части страницы:

<AsyncImage
  style={{
    borderRadius: 50,
    height: 100,
    width: 100
  }}
  source={{
    uri: 'https://goo.gl/2W4iW6'
  }}
  placeholderColor='#b3e5fc'/>

Посмотреть источник здесь

Следующие шаги

В оставшейся части этой серии мы сделаем этот компонент еще лучше.

Спасибо за прочтение! Мы с нетерпением ждем возможности поделиться с этой серией другими и не стесняйтесь задавать любые вопросы ниже. 🚀

Знаете ли вы, что мы каждую неделю подбираем для вас лучшие ресурсы по React Native и связанным с ним фреймворкам? Подпишитесь на нашу еженедельную рассылку React Native, чтобы каждую неделю получать ее на свой почтовый ящик. 🙌🏻

Создание компонента изображения с асинхронной загрузкой в ​​React Native - Часть I