主页 / 问题 / 1248289
Accepted
steep
Asked:2022-02-25 03:51:30 +0800 CST2022-02-25 03:51:30 +0800 CST

如何在 React Native expo 中获取 json 文件并输出到 FlatList？

  • 772

它总是在加载，没有内容显示。

铬控制台中的错误 在此处输入图像描述

应用程序.js

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

export default class App extends Component {
  constructor(props) {
    super(props);
    this.state = {
      isLoading: true
    }
  }

  componentDidMount() {
    return fetch('https://facebook.github.io/react-native/movies.json')
      .then((response) => response.json())
      .then((responseJson) => {
       // let ds = new FlatList.DataSource({rowHasChanged: (r1, r2) => r1 !== r2});
        this.setState({
          isLoading: false,
          dataSource: ds.cloneWithRows(responseJson.movies),
        }, function() {
          // do something with new state
        });
      })
      .catch((error) => {
        console.error(error);
      });
  }

  render() {
    if (this.state.isLoading) {
      return (
        <View style={{flex: 1, paddingTop: 20}}>
          <ActivityIndicator />
        </View>
      );
    }

    return (
      <View style={{flex:1,justifyContent:'center'}}>
      <FlatList
      data={this.state.data}
      keyExtractor={this._keyExtractor}
      renderItem={({item}) => <Text> {item.Begin} </Text> }
      />
      </View>
    );
  }
}
node.js

1 个回答

  1. Best Answer

    DataSource使用and的目的是什么cloneWithRows？我理解正确吗 - 你需要获取一个对象并输出一个数组movies？您可以将数组直接传递给组件：

    小吃

    import React, { memo, useState, useEffect } from 'react';
import { Text, View, FlatList, ActivityIndicator, StyleSheet } from 'react-native';
import Constants from 'expo-constants';


export default function App() {
  const [isLoading, setIsLoading] = useState(true);
  const [data, setData] = useState(null);

useEffect(() => {
    fetch('https://facebook.github.io/react-native/movies.json')
      .then(response => response.json())
      .then((responseJson) => {
        // const ds = new FlatList.DataSource({ rowHasChanged: (r1, r2) => r1 !== r2 });
        setIsLoading(false);
        setData(responseJson);
      }, () => {
        // do something with new state
      })
      .catch((error) => {
        console.error(error);
      });
  }, []);

  return (
    <View style={styles.container}>
     { 
       isLoading &&   
       <View style={{ flex: 1, paddingTop: 20 }}>
          <ActivityIndicator />
        </View>
      }
       { 
        !isLoading && 
          <View style={{ justifyContent: 'center', flex: 1 }}>
            <FlatList
              data={data?.movies}
              keyExtractor={item => item.id}
              ListHeaderComponent={() => (
                <View>
                  <Text style={{ color: 'blue', fontSize: 28, }}>{data?.title}</Text>
                  <Text style={{ color: 'brown', fontSize: 18, }}>{data?.description}</Text>
                </View>
              )}
              renderItem={({ item }) => (
                <Text style={styles.paragraph}>
                  {` - ${item?.title}: ${item?.releaseYear}`}
                </Text>
              )}
            />
          </View>
       }
    </View>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    paddingTop: Constants.statusBarHeight,
    backgroundColor: '#ecf0f1',
    padding: 8,
  },
  paragraph: {
    margin: 14,
    fontSize: 18,
    fontWeight: 'bold',
  },
});
    • 1

相关问题