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

#react-native #view #parameters

#react-native #Вид #параметры

Вопрос:

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

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

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

Вот мой 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>
    )
  }

1. Вам следует обновить свой вопрос, добавив более подробную информацию о том, что вы передаете. В настоящее время в его нынешнем виде этот вопрос неясен.

2. @Andrew почему ты удалил свой ответ? Это мне очень помогло, я собирался отметить это как ответ. Я также отредактирую свой вопрос.

3. @Andrew Я отредактировал свой вопрос. Пожалуйста, проверьте!

Ответ №1:

Поскольку 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>
    )
  }

Ответ №2:

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

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

Обратите внимание, что вам не нужно использовать this перед obj переменной.
Кроме того, в вашей item функции renderItem неправильно написано spelt, что может вызвать проблемы, если вы это не исправите.
Объект, который вы передаете, для работы этого конкретного кода должен представлять собой массив строк, что-то вроде ['first', 'second', 'third']
Также вы должны были определить функцию как 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>}
   />
  );
}

Ответ №3:

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

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

Ответ №4:

попробуйте это

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