Используйте изображение-заполнитель, если item.image имеет значение null (React Native)

Я использую FlatList для рендеринга нескольких изображений на экране. Я хочу отобразить замещающее изображение, когда item.img имеет значение null (элементы извлекаются из реакции-редукции).

Проблемы:

  1. Я хочу использовать изображение-заполнитель, используя «требовать». И он использует одну фигурную скобку. <Image source={ require('../assets/images/robot-prod.png') } style={styles.palceholderImage}/>. В то время как обычный рендеринг изображения использует две фигурные скобки {{uri: item.img}}.

  2. Должен ли я встроить оператор if(item.img)?

Вот функция _renderItem.

 _renderItem = ({item}) => {
    let imgUrl = item.img;

    return (
      <TouchableWithoutFeedback
        onPress={() => this._handleCategoryPress(item.id)}>
        <Image
          key={item.id}
          source={{uri: item.img}}
          style={styles.rowImage}
          resizeMode="cover"
        />
      </TouchableWithoutFeedback>
    );
  }

Это ответ API

[
    {
        "id": 1,
        "name": "Gym",
        "image": "www.aws.blahblahblah"
    },
    {
        "id": 2,
        "name": "School",
        "image": null
    },
    {
        "id": 3,
        "name": "hollymo",
        "image": "www.aws.blahblahblah"
    },

Спасибо


react-native reactjs react-native-flatlist
person hellofanengineer    schedule 26.09.2017    source источник
comment
Вы используете Редукс?   -  person Andrew    schedule 26.09.2017

Ответы (4)


arrow_upward
2
arrow_downward

Вам нужен полноценный компонент React. Простой способ управления рендерингом на основе завершенного вызова API — использовать его как обещание и .then использовать this.setState. Если вы хорошо разбираетесь в обещаниях:

apiPromise = () => new Promise((resolve, reject)=> {
  apiData = myApiCall()
  resolve(apiData)
}

class StuffToRender extends Component {
constructor(props) {
  super(props)
  this.state = {
    loaded: false
  }
}
componentWillMount() {
  apiPromise().then (() => {
    this.setState({loaded: true})
  })
}

render() {
  return (
    <div>
      {this.state.loaded ? myContent : myContentWhileLoading}
    </div>
  )
}
}

Кроме того, в качестве примечания, ошибка, которую вы получили от решения другого пользователя, не имеет ничего общего с логикой API/загрузки. Дело в том, что вы пытались вернуть более 1 элемента html или компонента:

render() {
  return (
    <div>
      stuff
    </div>
    <div>
      stuff2
    </div>
  ) //two sets of div elements expose
}

Здесь вы визуализируете 2 набора предметов. Вот что значит «множество детей». Но это легко исправить. Просто заверните предметы в один контейнер большего размера.

render() {
  return (
    <div>
      <div>
        stuff
      </div>
      <div>
        stuff2
      </div>
    </div>
  ) //everything wrapped into one single div
}
person Andrew    schedule 26.09.2017
comment
Привет, Эндрю, на самом деле это не то, что я ищу, но мне всегда было любопытно, как он обрабатывает загрузку приложений. Спасибо. - person hellofanengineer; 26.09.2017
comment
подожди секунду - person hellofanengineer; 26.09.2017
comment
Я забыл конструктор с this.state.loaded как false. Кроме того, я упустил из виду тот факт, что вы используете избыточность... Это меняет дело. обертывание вызова API с помощью dispatch уже подразумевает обещание в избыточности, поэтому вам не нужно вручную делать это самостоятельно. - person Andrew; 26.09.2017
comment
@JohnBaek Вау, извини. Я использовал синтаксис React, а не React Native с View и Text. Но я уверен, что вы понимаете, что я имею в виду на данный момент ;) - person Andrew; 26.09.2017
comment
Спасибо за попытку - person hellofanengineer; 26.09.2017
comment
@JohnBaek У меня есть пакет npm (для обычного React), и у меня есть демонстрационная страница, которая показывает, что делает мой пример кода. Пожалуйста, проверьте это. Вы уверены, что это не то, что вы ищете? Потому что мой ответ кажется очень актуальным. Он достигает конечной цели. Он просто не использует точный метод, который вы описали. andrew1007.github.io/react-on-images-loaded - person Andrew; 26.09.2017
comment
Не забудьте отменить запрос API в componentWillUnmount, иначе вы можете получить сообщение об ошибке, если компонент размонтируется во время обработки запроса (даже если это может не понадобиться здесь, это хорошая практика, когда вы используете setState в обратном вызове промиса). - person David Hellsing; 07.11.2017

arrow_upward
2
arrow_downward

Попробуй это

       item.image &&      
        <Image
          key={item.id}
          source={{uri: item.img}}
          style={styles.rowImage}
          resizeMode="cover"
        />

       !item.image &&      
        <Image
          key={item.id}
          source={require('../assets/images/robot-prod.png')}
          style={styles.palceholderImage}
          resizeMode="cover"
        />
person WESLEY    schedule 26.09.2017
comment
Потрясающие..! гм.. почему нет такого утверждения, как if.?? Могу я просто сделать это? - person hellofanengineer; 26.09.2017
comment
@WESLEY Проблема Джона будет связана с ожиданием завершения вызова асинхронного API. Один проход не сработает. - person Andrew; 26.09.2017
comment
@Andrew Эм, на самом деле это именно то, что я ищу ..! И я собираюсь опубликовать вопрос о how to deal with the issue of waiting for the async API call to finish. Не могли бы вы оптимизировать этот код? Это не работает. - person hellofanengineer; 26.09.2017
comment
Нарушение инварианта: React.Children.only ожидал получения одного дочернего элемента React. - person hellofanengineer; 26.09.2017
comment
Я на самом деле сделал то, что вы просили только что. Это полное решение проблемы. - person Andrew; 26.09.2017

arrow_upward
1
arrow_downward

Мы можем лучше справиться с этим в React Native, используя следующий подход.

Так как изображения base64 рендерятся в React Native из коробки.

Итак, для вашего случая,

  1. Получите данные base64 для вашего изображения-заполнителя.

  2. В вашем компоненте

    const placeholderBase64image = "data:image/png;base64 [yourbase64imagedata]"

  3. Вид изнутри, используйте его как:

    <Image source={{ uri: yourImageUri ? yourImageUri : placeholderBase64image }}/>

person rajaishwary    schedule 07.11.2017

arrow_upward
0
arrow_downward

добавить изображение заполнителя в родное изображение реакции. использовать тег defaultSource

<Image source={{ uri: require('../images/dummy.png')}} 
            style={styles.itemImage}
            defaultSource={images.dummy} />
person Lalit kumar    schedule 01.02.2019