listview и fetch reac native not working

Question

Я пытаюсь загрузить информацию из json-файла, используя выборку и отображение данных с использованием собственного компонента Listview React. Данные из выборки уже загружается на моих this.state.films, потому что если я пытаюсь

<Text>{this.state.films[0].title}</Text> 

я получаю название фильма, и это нормально. Но когда я пытаюсь просмотреть Listview, я получаю только «[]». Что я делаю неправильно? Фактически я следую за React native doc, и я trinying, чтобы присоединиться к двум разделам: «Networking» и «Использование списка». Я взял оттуда джон. Пожалуйста, помогите, Спасибо!

Это мой код index.windows.js

import React, { Component } from 'react'; 
 
import { 
 
    AppRegistry, 
 
    StyleSheet, 
 
    Text, 
 
    View, 
 
    Image, 
 
    TextInput, 
 
    ListView 
 
} from 'react-native'; 
 

 
class AwesomeProject extends Component { 
 
    constructor(props) { 
 
    super(props) 
 
    this.state = { films: [] } 
 
    const ds = new ListView.DataSource({rowHasChanged: (r1, r2) => r1 !== r2}); 
 
    } 
 

 
    componentWillMount() { 
 
    fetch('http://facebook.github.io/react-native/movies.json') 
 
     .then((response) => { 
 
     return response.json() 
 
     }) 
 
     .then((movies) => { 
 
     this.setState({ films: ds.cloneWithRows(movies.movie) }) 
 
     }) 
 
    } 
 

 
    render() { 
 
     return (
 
     <View style={{paddingTop: 22}}> 
 
      <ListView 
 
      dataSource={this.state.films} 
 
      renderRow={(rowData) => <Text>{rowData.title}</Text>} 
 
      /> 
 
     </View> 
 
    ); 
 
    } 
 

 
} 
 

 

 
AppRegistry.registerComponent('AwesomeProject',() => AwesomeProject);

Answer 1

Реагировать Native имеет более простое решение, а FlatList, который работает хорошо, и оборачивает вокруг ListView. Его можно использовать следующим образом:

import React, { Component } from 'react'; 
import { 
    AppRegistry, 
    StyleSheet, 
    Text, 
    View, 
    Image, 
    TextInput, 
    FlatList 
} from 'react-native'; 

class AwesomeProject extends Component { 

    state = { 
    films: [] 
    } 

    componentWillMount() { 
    fetch('http://facebook.github.io/react-native/movies.json') 
     .then(response => response.json()) 
     .then((films) => { 
     this.setState({ films }) 
     }) 
    } 

    render() { 
     return (
     <View style={{paddingTop: 22}}> 
      <FlatList 
      data={this.state.films} 
      renderItem={({item}) => <Text>{item.title}</Text>} 
      /> 
     </View> 
    ); 
    } 

} 


AppRegistry.registerComponent('AwesomeProject',() => AwesomeProject);