javascript - react native : Flat List not showing up

Question

我试图返回两个东西，一个单独的 Mission 组件和一个 flat list。当我运行模拟器时，我可以获得 Mission 组件的返回值，但不能返回 flat list。没有错误，所以我对如何处理这个问题有点迷茫。我什至仔细检查了我的进口商品。这是代码:

import React, { Component } from "react";
import { ScrollView, Text, FlatList } from 'react-native';
import Mission from './Mission';
import PARTNERS from '../shared/partners';
import { ListItem } from 'react-native-elements';

class About extends Component {

  constructor(props) {
    super(props);
    this.state = {
      partners: PARTNERS,
    }
  };

  static navigationOptions = {
    title: 'About Us'
  }

  render() {
    const { navigate } = this.props.navigation;
    const renderPartner = ({ item }) => {
      return (
        <ListItem
          title={item.name}
          subtitle={item.description}
          leftAvatar={{ source: require('./images/bootstrap-logo.png') }}
        />
      );
    };

    return (
    <ScrollView>
        <Mission />
        <FlatList
          data={this.state.partners}
          renderItem={renderPartner}
          keyExtractor={item => item.id.toString()}
      />
    </ScrollView >
    );
  }
}


export default About;

Answer 1

import React, { Component } from 'react';
import { FlatList, View, Text } from 'react-native';
import { ListItem, Card } from 'react-native-elements';
import { FILMS } from '../shared/films';
 
 /*
  When working correctly, when you hit "Tap to play" in the simulated mobile device to the right, you will see a list of films from shared/films.js.
  Before updating this code:
   - You must be logged into your Expo account (create an account if you do not have one already)
   - Use the Save button on the upper right corner to fork this Snack to your account. Name it as you please, or accept the default random name. 
  Share the link to your version in the forum for this code challenge. 

  Your challenges:  1. Fix the component by adding a constructor and adding the data imported as FILMS to the component's state
                    2. In the FlatList, use that state data for films in the 'data' attribute.
                    3. In the ListItem, add the film title as the title, and the director as the subtitle.
                    4. Update films.js to add a third film of your choice. 
  Bonus Challenge: Write a custom view in the ListItem subtitle to show more details about each film, such as the release year, genre, language.
*/
class FilmCatalogue extends Component {
  constructor(props) {
    super(props);
    this.state = {
      films: FILMS
    }
  }

  render() {
    const renderFilm = ({item}) => {
        return (
            <ListItem
                title={item.title}
                titleStyle={{fontWeight: 700, color: 'dark-grey'}}
                subtitle={
                  <View >
                    <Text style={{fontStyle: "italic", fontWeight: 500}}>{item.director}</Text>
                    <Text>{item.category}</Text>
                    <Text>{item.language}</Text>
                  </View>
                }   
                rightSubtitle={item.year}  
                bottomDivider           
            />
        );
    };

    return (
        <Card title="Film Catalogue">
          <FlatList 
              data={this.state.films}
              renderItem={renderFilm}
              keyExtractor={item=>item.id.toString()}
          />
        </Card>
    );
  } 
}

export default FilmCatalogue;

我在 expo snack 上用过这个显示我在此文件中的文件列表(电影目录 Component.js)

希望这种帮助!