Реагировать на исходный белый фон в Listview - PullRequest
Новая
       32

Реагировать на исходный белый фон в Listview

0 голосов
/ 27 апреля 2018

Я делаю представление списка, где я буду просматривать список некоторых данных из моей базы данных. Но после запуска программы все, что я получил, это белый фоновый экран. Кто-нибудь знает решение?

снимок экрана

Вот мой код 

export default class Pasta extends Component {
    constructor() {
        super()
        this.state = {
            dataSource: []
        }
    }

    renderItem = ({ item }) => {
    return (
            <View style = {{flex: 1, flexDirection: 'row'}}>
                <View style = {{flex: 1, justifyContent: 'center'}}>
                    <Text>
                        {item.menu_desc}
                    </Text>
                    <Text>
                        {item.menu_price}
                    </Text>
                </View>
            </View>
    )
    }

    componentDidMount() {
        const url = 'http://192.***.***.***:9090/menu'

        fetch(url)
        .then((response) => response.json())
        .then((responseJson) => {
            this.setState({
                dataSource: responseJson.menu
            })
        })
    }

    render() {
        return (
            <View style = { styles.container }>
                <FlatList
                    data = { this.state.dataSource }
                    renderItem = {this.renderItem}
                />
            </View>
        );
    }
}

1 Ответ

0 голосов
/ 27 апреля 2018

Добавьте extraData реквизит к вашему FlatList, чтобы вызвать повторную визуализацию 

keyExtractor = (item, index) => item.id; // note: id is the unique key for each item

render() {
  return (
    <FlatList
      data = {this.state.dataSource}
      renderItem = {this.renderItem}
      extraData={this.state}
      keyExtractor={this.keyExtractor}
    />
   );
  }

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

...