react-native - API 调用后在 FlatList 中呈现文本
问题描述
我正在尝试从 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'
}
});
解决方案
我通过执行以下操作自行解决了这个问题:
<Text style={{ height: 150, width : equalWidth}}>{itemData.item.title}</Text>
推荐阅读
- mongodb - 从 mongodb 导出文件
- r - 有没有办法在 mutate 中包含 Groupby
- php - 将 HTML 链接添加到 PHP 消息数组
- rust - 如何从返回异步的 Vec 闭包中加入_all?
- google-apps-script - Quandl API 在 Google appscript 上返回 HTML 响应
- javascript - 画布绘制触摸未绘制
- python-3.x - 具有多个输入的 Python 字典列表搜索
- node.js - 需要帮助以解决 npm start 错误
- jaxb - 通过 WebServiceGatewaySupport 编组失败并出现 JAXBException: class
在此上下文中也不知道它的任何超类 - c# - 如何获取带有版本的操作系统安装补丁详细信息