Question

我是反应原生的新手。我有一个api地址，我需要它的一些数据显示为列表。当我尝试这样做时，它不会显示结果。我的代码写在下面。请检查它并帮助我使用此代码。我需要打印数据，如：

每个数据的符号，供应，FULLNAME，NAME，ID，VOLUME24HOURTO

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

export default class Project extends React.Component {

  constructor(props)
  {

    super(props);

    this.state = { 
    isLoading: true
  }
  }

  componentDidMount() {

       return fetch('https://min-api.cryptocompare.com/data/top/volumes?tsym=BTC')
         .then((response) => response.json())
         .then((responseJson) => {
           this.setState({
             isLoading: false,
             dataSource: responseJson
           }, function() {
             // In this block you can do something with new state.
           });
         })
         .catch((error) => {
           console.error(error);
         });
     }

FlatListItemSeparator = () => {
    return (
      <View
        style={{
          height: 1,
          width: "100%",
          backgroundColor: "#607D8B",
        }}
      />
    );
  }

  GetFlatListItem (FULLNAME) {

  Alert.alert(FULLNAME);

  }


  render() {

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

    return (

<View style={styles.MainContainer}>

       <FlatList

          data={ this.state.dataSource }

          ItemSeparatorComponent = {this.FlatListItemSeparator}

          renderItem={({item}) => <Text style={styles.FlatListItemStyle} onPress={this.GetFlatListItem.bind(this, item.FULLNAME)} > {item.FULLNAME} </Text>}

          keyExtractor={(item, index) => index}

         />


</View>

    );
  }
}

const styles = StyleSheet.create({

MainContainer :{

justifyContent: 'center',
flex:1,
margin: 10,
paddingTop: (Platform.OS === 'ios') ? 20 : 0,

},

FlatListItemStyle: {
    padding: 10,
    fontSize: 18,
    height: 44,
  },

});

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

Answer 1

来自url的JSON响应是一个对象。更改为dataSource: responseJson.Data以获取可由FlatList呈现的数组。

Answer 2

请参阅任何基本教程以构建您的需求，以便您可以轻松了解所有状态以及您需要的更改。并且还将console.log（）用于检查每个州的日志。

for tutorial Flat list data show from Web-api

For set datasource changes check

使用API反应原生

2 个答案:

使用API​​反应原生

2 个答案:

使用API反应原生