Question

我正在尝试通过FlatList中的API调用呈现文本，但是我没有得到任何输出..没有错误。

这是我到目前为止所尝试的：

API调用后在FlatList中呈现文本

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

const { width, height } = Dimensions.get('window');
const equalWidth =  (width / 2 ) 
export default class Friends extends Component {
 constructor(props) {
 super(props)
 this.state = {
 moviesList: []
 }
 }
  _keyExtractor = (item, index) => item.id;

 renderRowItem = (itemData) => {
 return (
 <View>
 <Text style={{ height: 150,  width : 
 equalWidth}}>itemData.item.title</Text>
  </View>
)
  }

componentWillMount() {
    {this.getMoviesFromApiAsync()}
  }
  render() {
    return (
      <View style={styles.container}>
        <FlatList
          data={this.state.moviesList}
          numColumns={2}
          keyExtractor={this._keyExtractor}
          renderItem={this.renderRowItem}
        />
      </View>
    );
  }


  getMoviesFromApiAsync = () => {
    return fetch('https://facebook.github.io/react-native/movies.json')
      .then((response) => response.json())
      .then((responseJson) => {
        alert(JSON.stringify(responseJson))
        this.setState({ moviesList: responseJson.movies }) // this will update state to re-render ui
        return responseJson.movieList;
      })
      .catch((error) => {
        console.error(error);
      });
  }

}

const styles = StyleSheet.create({
  container: {
    flex: 1,

    flexDirection: 'column'
  }
});

Answer 1

我通过执行以下操作自行解决了这个问题：

<Text style={{ height: 150,  width : equalWidth}}>{itemData.item.title}</Text>

API调用后在FlatList中呈现文本

1 个答案: