Question

我正在尝试创建类似网格的东西，并用作按钮，我想知道为什么 Flatlist 不显示..

我的代码如下：

import React, { Component } from 'react';
import { Platform, StyleSheet,Text, View , Image, TextInput, TouchableOpacity, Alert, Linking, Dimensions, FlatList} from 'react-native';

const data  = [{key : 'SWIFT'}, {key: 'Transfers'}, {key: 'Bill Payments'}, {key : 'New Account'}];

export default class Home extends Component {
  
    constructor(props) {
    super(props);
    this.state = {
    };
  }

  renderItem = ({item, index}) =>{
    return(
        <View style ={styles.item}>
            <Text style = {styles.itemText} >{item.key}</Text>
        </View>
    );
  };

  render() {
    return (
      <View>
        <Text style={styles.welcomeText}> Welcome , XXXXXXXX!  - XXXXX  </Text>
        <Text style={styles.balanceText}> 470,000.00 </Text>
        <View
        style={{
            borderBottomColor: '#696b69',
            borderBottomWidth: 1,
         }}
        />
        <View>
            <FlatList
            data = {data}
            style = {styles.container}
            renderItem = {this.renderItem}
            />
        </View>
      </View>
    );
  }
}

const styles = StyleSheet.create({
    welcomeText :{
        margin : 10,
        fontSize : 13,
        fontFamily : 'Verdana',
        fontWeight : 'bold',
        flexDirection : 'row'
    },

    balanceText:{
        margin : 10,
        fontSize : 22,
        fontFamily : 'Verdana',
        fontWeight : 'bold'
    },
    accountNumText :{
        margin : 10,
        fontSize : 13,
        textAlign : 'right',
        fontFamily : 'Verdana',
        fontWeight : 'bold'
    },
    container:{
        flex :1,
        marginVertical :20
    },
    item : {
        backgroundColor : '#030303',
        alignItems: 'center',
        justifyContent : 'center',
        flex : 1,
        margin : 1,
        height : Dimensions.get('window').width / 3
      },
      
      itemText:{
        color: '#fff'
      }
});

请提供帮助，我似乎没有正确理解。它应该从 const 数据中获取信息并显示在 Flatlist 中，但出于某种原因，它没有这样做。

Answer 1

Wotking 示例：Expo Snack

删除给 FlatList 的样式

<FlatList
    data={data}
    renderItem={this.renderItem}
/>

平面列表不显示

1 个答案: