listviewとreacネイティブが動作しない

Question

私は、ListView Reactネイティブコンポーネントを使ってデータをフェッチして表示することで、jsonファイルから情報をロードしようとしています。私は

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

をしようとした場合、私は映画の名前を取得し、それは大丈夫ですので、フェッチからのデータは、私のthis.state.filmsにロードし、すでにあります。しかし、私がListviewを試してみると、私は "[]"しか得られません。 私は何が間違っていますか？実際に私はReactのネイティブ・ドックを守っています。私は、「ネットワーキング」と「リスト・ビューを使用する」という2つのセクションに参加しています。私はそこからjsonを取った。 助けてください、 ありがとう！私のコードは

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

をindex.windows.js

は、ネイティブがうまく動作し、リストビューを包み込むシンプルなソリューション、FlatListを、持って反応します。これは次のように使用できます：

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);