React Native FlatList

новичок в React Native, но у меня есть массив данных

list = [
{key: "image1", imgLink: "imagelink"},
{key: "image2", imgLink: "imagelink"},
{key: "image3", imgLink: "imagelink"},
{key: "image3", imgLink: "imagelink"},
]

который передается в props моему компоненту, а затем я помещаю его в состояние в моем конструкторе

constructor(props){
    super(props)
    this.state = {
        portraitImage: 'initalImageLink',
        isModalVisible: false,
        list: this.props.list,
    };


}

У меня также есть FlatList внутри модального окна:

<Modal isVisible={this.state.isModalVisible} onBackdropPress = {this._hideModal}>
    <View style={{ flex: 1, backgroundColor:'#FFFFFF'}}>
        <FlatList 
            data={this.state.list} 
            renderItem={
                ({item}) => <ListItem onPress = {this._setImg.bind(this,item.imgLink)} title={item.key} />
            }
        />

        <Button title = {'Close Modal'} onPress={this._hideModal}/>      
    </View>
</Modal>


_setImage(value){
    this.setState({
        portraitImage: value
    });
};

Я пытаюсь просто показать список имен ключей (image1, image2, image3, image4), а затем, когда пользователь нажимает одно из имен клавиш, он изменяет состояние портретного изображения.

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

Когда я устанавливаю data = {this.props.list} вместо состояния, я получаю

Недопустимый тип элемента: ожидается строка (для встроенных компонентов) или> класс / функция (для составных компонентов), но получено: undefined. Вы, вероятно, забыли экспортировать свой компонент из файла, в котором он определен.


react-native list react-native-flatlist listitem
person user3074140    schedule 29.08.2017    source источник

Ответы (3)


arrow_upward
2
arrow_downward

Это не имеет смысла, потому что this.state.list и this.props.list не должны отличаться. По крайней мере, это то, что я могу прочитать из предоставленного вами кода.

Что я могу сказать:

Недопустимый тип элемента: ожидается строка (для встроенных компонентов) или> класс / функция (для составных компонентов), но получено: undefined. Вы, вероятно, забыли экспортировать свой компонент из файла, в котором он определен.

В нем говорится, что в качестве типа использовалось undefined, но это не так! Я предполагаю, что <ListItem .../> не определено.

React-native не имеет встроенного типа ListItem. react-native-elements делает, но я не уверен, что их ListItem тип может быть отображен как обычный <View /> тип. Можете ли вы добавить свои определения импорта и реквизита (если есть), чтобы мы могли видеть, что к чему?

Не могли бы вы попробовать <TouchableHighlight .../> вместо <ListItem .../>, чтобы проверить, сохраняется ли ошибка?

person DerpyNerd    schedule 05.09.2017
comment
да, вы правы, у меня не было импорта для компонента Listitem, о котором я должен был упомянуть, я обнаружил, что - person user3074140; 05.09.2017
comment
Рад, что это было что-то простое, вы никогда не знаете, насколько сложным это может быть на данном этапе в react-native :) - person DerpyNerd; 06.09.2017

arrow_upward
1
arrow_downward

это простой пример того, как отображать данные в виде плоского списка, если вы поделитесь большим количеством кода, мы можем дать вам лучший пример

constructor(props) {
super(props)
this.state = {
  list: []
};
}

getList = () => {
const li = [
  { key: "image1", imgLink: "imagelink" },
  { key: "image2", imgLink: "imagelink" },
  { key: "image3", imgLink: "imagelink" },
  { key: "image3", imgLink: "imagelink" },
]

this.setState({
  list: li
})
}

componentWillMount() {
this.getList()
}

render() {
return (
  <View style={{ flex: 1, backgroundColor: '#FFFFFF' }}>
    <FlatList
      data={this.state.list}
      renderItem={({ item }) => <Text>{item.key}</Text>}
    />
  </View>);
}
}
person Ganesh Cauda    schedule 30.08.2017

arrow_upward
0
arrow_downward

Вместо ListItem вы можете использовать TouchableOpacity, и, щелкнув элемент, вы можете консольировать выбранный элемент, код будет таким, как показано ниже.

<TouchableOpacity onPress={()=>console.log("item: ",item.key)}>
    <Text >{item.key}</Text>
</TouchableOpacity>
person Antier Solutions    schedule 06.01.2021