如何列出React Native中的传入数据

Question

我想列出我使用的服务中的数据，因为它在示例中。你能帮助我吗？

我的代码：

 import React, { Component } from "react";

export default class CustomersTab extends Component {
  constructor(props) {
    super(props);
    this.state = {
      token: "",
      isLoading: true,
      dataSource: null
    };
  }

  componentWillMount() {
    tokenner()
      .then(responseJson => {
        const token = "Bearer " + responseJson.result.token;
        this.setState({ token });
        fetch(
          "apiurl",
          {
            method: "GET",
            headers: {
              Accept: "application/json",
              "Content-Type": "application/json",
              Authorization: token
            }
          }
        )
          .then(response => response.json())
          .then(responseData => {
            this.setState({
              isLoading: false,
              dataSource: responseData.result
            });
          });
      })
      .catch(error => console.warn(error));
  }};
  render() {

        return (
        <View>
          <Text>
            I WANT LİST DATA HERE
          </Text>
        </View> )}}

我试图自己做，但我无法构建循环结构。每次只显示一个数据。我该怎么办？

Answer 1

你必须做这样的事情。将ID更改为您要显示的内容。

return (
  <View>
    <ListView
    dataSource={this.state.dataSource}
    renderRow={data => <Text>{data.id}</Text>}
    />
  </View>
);

Answer 2

请从本机反应导入视图和文本。

import {
  Text,
  View,
} from 'react-native';

constructor(props: Object) {
   super(props);
   this.state = {
    dataSource: []
   }    
};

/* dataSource = [
     { "id": "1", "title": "Star Wars", "releaseYear": "1977" },
     { "id": "2", "title": "Back to the Future", "releaseYear": "1985" },
     { "id": "3", "title": "The Matrix", "releaseYear": "1999" },
     { "id": "4", "title": "Inception", "releaseYear": "2010" },
     { "id": "5", "title": "Interstellar", "releaseYear": "2014" }
   ]
*/

renderMovieList(){
  return  this.state.dataSource.map((movie, index) =>
    <View 
      key={movie.id} 
      style={{ height:50 padding:10}}>
      <Text> movie.title</Text>
      <Text> movie.releaseYear</Text>
    </View>
  )
}
render() {
    return (
      <View style={{flex: 1, justifyContent:'center'}}>
        {this.state.dataSource.length ? this.renderMovieList(): null}
      </View>
    );
  }