React Native: FlatList не отображается - PullRequest
Новая
       3

React Native: FlatList не отображается

1 голос
/ 08 июля 2019

Я пытаюсь создать пользовательский компонент, который будет отображать параметры для нового выбора, если первый выбор не достаточно ясен.Я использую компонент FlatList для отображения данных, и кажется, что он не отображает данные, которые задаются в качестве опоры.

Это функция render для компонента 

import { Header, List, ListItem } from "react-native-elements";
import PickerBox from "./PickerBox";

render() {
    return (
      <View>
        <Header
          centerComponent={{
            text: "By " + this.state.newTaxon + ", did you mean...",
            style: { color: "white", fontSize: 20, textAlign: "center" }
          }}
          backgroundColor="black"
        />
        <FlatList
          data = {this.state.dataSource}
          renderItem = {({item}) => {
            <PickerBox
              title = {item.c_syn_name}
            />
          }}
          keyExtractor = {(item) => item.c_syn_name}
        />
      </View>
    );
}

Это PickerBox компонент 

const styles = StyleSheet.create({
  container: {
    flex: 1,
    flexDirection: "row",
    padding: 10,
    marginLeft: 16,
    marginRight: 16,
    marginTop: 8,
    marginBottom: 8,
    borderRadius: 5,
    backgroundColor: "#FFF",
    elevation: 2
  },
  title: {
    fontSize: 16,
    color: "#000"
  },
  container_text: {
    flex: 1,
    flexDirection: "column",
    marginLeft: 12,
    justifyContent: "center"
  },
  description: {
    fontSize: 11,
    fontStyle: "italic"
  }
});

const PickerBox = (title) => {
  return (
    <View style={styles.container}>
        <Text style={styles.container_text}>{title}</Text>
    </View>
  );
};

export default PickerBox;

Это оператор импорта для PickerBox в компоненте 

import PickerBox from "./PickerBox"; // reside in same folder

Состояние dataSource происходит из объекта JSON, которыйсодержит макет, подобный этому, в каждой записи. 

"c_node_name_scientific": "Centurio",
"c_syn_name": "wrinkle-faced bat",
"i_node_id": 27644,

Вывод в симуляторе - это просто заголовок, но ожидаемый вывод - это заголовок со списком внизу.

Ответы [ 3 ]

5 голосов
/ 08 июля 2019

Во-первых, вам нужно убедиться, что если ваш метод renderItem использует функцию жирной стрелки с фигурными скобками, как в вашем примере, вам нужно добавить оператор return , например, так: 

renderItem={({item}) => { return <PickerBox title={item.c_syn_name} /> }}

Если вы не используете фигурные скобки, вы можете определить функцию следующим образом: 

renderItem={({item}) => <PickerBox title={item.c_syn_name} />}

Во-вторых, убедитесь, что данные представляют собой массив , а не объект .Согласно описанию данных FlatList prop в оригинальной документации:

Для простоты данные представляют собой простой массив.Если вы хотите использовать что-то еще, например, неизменяемый список, используйте непосредственно базовый VirtualizedList.

Из вашего вопроса кажется, что вы хотите перебрать массив объектов, подобный этому:

[
  {
    "c_node_name_scientific": "Centurio",
    "c_syn_name": "wrinkle-faced bat",
    "i_node_id": 27644
  },
  {
    "c_node_name_scientific": "xxx",
    "c_syn_name": "xxx",
    "i_node_id": 123
  },
  //...
]

Если это так, просто оберните объект состояния dataSource в массив, как показано выше.

Если вы хотите передать данные как объект, подобныйна это: 

{
  key1: {title: 'Title 1'},
  key2: {title: 'Title 2'}
  key3: {title: 'Title 3'}
}

вам нужно сделать что-то вроде следующего, чтобы сделать данные доступными для FlatList: 

<FlatList
  data={Object.keys(this.state.dataSource)}  // will result in ["key1", "key2", "key3"]
  renderItem={({item}) => 
    // here `item` will be the Object's key. eg: "key1"
    <PickerBox title={this.state.dataSource[item].title} />
  }
/>

И, наконец, если Flatlist необходимо обновить как Stateобновления, вы должны добавить в prop extraData={this.state} в FlatList.В соответствии с FlatList Documentation :

Передав extraData = {this.state} в FlatList, мы гарантируем, что FlatList будет заново визуализироваться при изменении state.selected.Без установки этого реквизита FlatList не знал бы, что ему необходимо повторно визуализировать какие-либо элементы, потому что он также является PureComponent, и сравнение реквизитов не покажет никаких изменений.

0 голосов
/ 08 июля 2019

Сначала убедитесь, что this.state.dataSource не является пустым массивом.Если ваш источник данных что-то вроде этого, то это должно работать: 

<FlatList 
    data={[{c_syn_name: 'a'}, {c_syn_name: 'b'}]}
    keyExtractor = {item => item.c_syn_name}
    renderItem={({item}) =><PickerBox title = {item.c_syn_name} />}
    />
0 голосов
/ 08 июля 2019

вы можете попробовать это 

   renderItem = {({item}) => {
            PickerBox(item.c_syn_name);
          }}
...