Могу ли я вызвать props.navigation в данных Flatlist?

Question

У меня объявлен const, параметры которого переданы с другой страницы.

const obj = this.props.navigation.state.params.item;
const itemArray = Object.values(obj.name)

Теперь я вызываю itemArray в данных Flatlist, см. Ниже.

Вот мой Flatlist:

 <FlatList
      key={this.keyExtractor}
      data={itemArray}
      renderItem={({item}) => this.renderText(item)}
    />

Проблема в том, что он не отображаеттекст.Это просто пусто.

Вот метод визуализации, который я вызываю в Flatlist:

renderText = (itt) => {

    return (
      <View style={{ flex: 1, alignItems: "center", justifyContent: "center" }}>
        <ListItem 
        title={itt.name}
        />
      </View>
    )
  }

Answer 1

Вы должны иметь возможность использовать FlatList.

Вот как я бы реализовал это в методе рендеринга вашего компонента.

1. Обратите внимание, что вам не нужно использовать this перед переменной obj.
2. Также вы неправильно написали item в своей функции renderItem, которая может вызвать проблемы, если вы ее не исправите.
3. Объект, который вы передаете, чтобы этот конкретный код работал, должен быть массивом строк, что-то вроде ['first', 'second', 'third']
4. Также вы должны были определить функцию как keyExtractor внутри вашего компонента.

---

keyExtractor = (item, index) => {
  return index.toString();
}

render () {
  const obj = this.props.navigation.state.params.item;
  return (
   <FlatList
     key={this.keyExtractor}
     data={obj}
     renderItem={({ item }) => <Text>{item}</Text>}
   />
  );
}

Answer 2

Поскольку FlatList не принимает объект, вы должны сделать обходной путь. Вы также должны создать массив и поместить туда свой объект.

const obj = this.props.navigation.state.params.item;
    var propsArray = [];
    const itemArray = Object.assign(obj)
    propsArray.push(itemArray)

    return (
      <View>
        <FlatList
          key={this.keyExtractor}
          data={propsArray}
          renderItem={({ item }) => this.renderText(item)}
        />
      </View>
}

и ваш метод рендеринга должен остаться прежним:

renderText = (itt) => {

    return (
      <View style={{ flex: 1, alignItems: "center", justifyContent: "center" }}>
        <ListItem 
        title={itt.name}
        />
      </View>
    )
  }

Answer 3

попробуйте

renderText = (itt) => {
    return (
      <View style={{ flex: 1, alignItems: "center", justifyContent: "center" }}>
        <ListItem 
        title={itt}
        />
      </View>
    )
  }

Answer 4

Вы можете напрямую использовать

<FlatList
      key={this.keyExtractor}
      data={this.props.navigation.state.params.item}
      renderItem={({ iteemm }) => <Text>{iteemm}</Text>}
/>