Question

我正在尝试通过编写一个简单的应用程序来学习React-native，但是我一直坚持让FlatList显示虚拟数据。

我已经在此处检查了其他一些答案，但是由于所有内容仍然空白，它们似乎都无法解决我的问题。

App.tsx

import React, {Component} from 'react';
import {View, Platform, StatusBar} from 'react-native';

import FriendList from './src/FriendList';

export default class App extends Component {
  render() {
    return (
      <View style={{ paddingTop: Platform.OS === 'ios' ? 0 : StatusBar.currentHeight }}>
        <FriendList items={friends}></FriendList>
      </View>
    );
  }
}

const friends = Array.apply(null, Array(60)).map((v, i) => {
  return {
    id: i,
    src: 'http://placehold.it/200x200?text=' + (i + 1)
  };
});

FriendList.tsx

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

export default class FriendList extends Component<{items: Array<{id: number, src: string}>}> {
  constructor(props) {
    super(props);
  }

  render() {
    return (
      <View style={styles.MainContainer}>
        <FlatList data={this.props.items} renderItem={({item}) => (
          <View style={{flex: 1, flexDirection: 'column', margin: 1}}>
            <Image style={styles.imageThumbnail} source={{ uri: item.src}} />
          </View>
        )}
        numColumns={3}
        keyExtractor={(item, index) => item.id.toString()}
        />
      </View>
    );
  }
}

const styles = StyleSheet.create({
  MainContainer: {
    justifyContent: 'center',
    flex: 1,
    paddingTop: 30
  },
  imageThumbnail: {
    justifyContent: 'center',
    alignItems: 'center',
    height: 100
  }
});

我可能应该提到该应用程序构建良好，没有错误/警告，它只是在FlatList中不显示任何数据。

Answer 1

尝试从flex: 1删除renderItem

<FlatList data={this.props.items} renderItem={({item}) => (
    // remove flex: 1 here
    <View style={{flexDirection: 'column', margin: 1}}>
        <Image style={styles.imageThumbnail} source={{ uri: item.src}} />
    </View>
  )}
  numColumns={3}
  keyExtractor={(item, index) => item.id.toString()}
/>

Answer 2

从FriendList组件中删除MainContainer样式解决了我的问题。

Answer 3

请尝试以下代码

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

export default class App extends Component {
  state = {
    paymentDetails: [
      {
        id: 1,
        textData: 'data 1',
      },
      {
        id: 2,
        textData: 'data 2',
      },
      {
        id: 3,
        textData: 'data 3',
      },
    ]
  }

  renderFlatListView = () => {
    return (
      <View>
        <FlatList
          showsVerticalScrollIndicator={false}
          data={this.state.paymentDetails}
          extraData={this.state}
          keyExtractor={this.keyExtractor}
          renderItem={this.renderFlatListDataView}
        />
      </View>
    )
  }

  renderFlatListDataView = ({ index, item }) => {
    console.log(item.id)
    return (
      <View key={index}>
        <Text>{item.textData}</Text>
      </View>
    )
  }

  render() {
    return (
      <View style={styles.container}>
        {this.renderFlatListView()}
      </View>
    );
  }
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
    backgroundColor: '#F5FCFF',
    marginTop: 50,
  },
});

Answer 4

请使用此代码

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

    const Details= [
      {
        id: 1,
        textData: 'test1',
      },
      {
        id: 2,
        textData: 'test2',
      },
      {
        id: 3,
        textData: 'test3',
      },
      {
        id: 4,
        textData: 'test3',
      },
    ]

     class AppDetails extends Component {

      _renderItem= ({ index, item }) => {
        return (
          <View key={index}>
            <Text>{item.textData}</Text>
          </View>
        )
      }

      render() {
        return (
          <View style={styles.container}>
             <FlatList
              data={Details}
              extraData={this.state}
              keyExtractor={this.keyExtractor}
             renderItem={this._renderItem}
            />
          </View>
        );
      }
    }

    const styles = StyleSheet.create({
      container: {
        flex: 1,
        justifyContent: 'center',
        alignItems: 'center',
        backgroundColor: '#F5FCFF',
        marginTop: 50,
      },
    });

    export default AppDetails;

FlatList不显示任何数据

4 个答案: