react-native flatList 呈现空白屏幕

Question

我真的是 react-native 的新手。 我正在尝试做一个flatList。 起初它可以工作，但后来我添加了底部标签栏，然后它就不再工作了。 我试图返回并删除底部的标签栏，但总是出错。 最后一个是“找不到数据”。现在没有任何改变，我只是有一个空白屏幕。

我的代码：

// Helpers/membersData.js

export default data = [
{
   id:1,
   name: "Name",
   firstname: "Firstname",
   address: "some address",
   zipcode : 75000,
   city: "city",
   phone: "",
   email: "name.e@gmail.com"
},
{
    id:2,
    name: "Othername",
    firstname: "Otherfirstname",
    address: "Other address",
    zipcode : 75000,
    city: "City",
    phone: "0600000000",
    email: "name.first@gmail.com"
}

]

平面列表：

// Components/Members.js

  import members from '../Helpers/membersData';
  import React from 'react';
  import { StyleSheet, View, FlatList} from 'react-native';
  import MemberDetails from './MemberDetails';


 class Members extends React.Component {
  render() {
    return (
        <View style={styles.main_container}>
            <FlatList
                keyExtractor={(item) => item.id.toString()}
                data={members}
                renderItem={({item}) => <MemberDetails member={item}/>}
            />

        </View>
     )
    }
   }

  const styles = StyleSheet.create ({
   main_container: {
    marginTop: 25,
    marginLeft: 10
   }
  })

  export default Members

列表详情 // 组件/MemberDetails.js

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

class MemberDetails extends React.Component {
render() {
const member = this.props.member
return (
  <View style={styles.main_container}>

    <View style={{flexDirection: 'row'}}>
      <Text>{member.name}</Text>
      <Text style={{marginLeft:10}}>{member.firstname}</Text>
    </View>

    <View >
      <Text >{member.address}</Text>
    </View>

    <View style={{flexDirection: 'row'}} >
      <Text >{member.zipcode}</Text>
      <Text  style={{marginLeft:10}}>{member.city}</Text>
    </View>

      <Text>{member.phone}</Text>
      <Text  style={{marginLeft:10}}>{member.email}</Text>

      </View>
    )
  }
}

const styles = StyleSheet.create({
main_container: {
height: 190,
flexDirection: 'column',
alignItems: 'center'
  },
})


export default MemberDetails

App.js

//import Members from './Components/Members'

import * as React from 'react';
import { NavigationContainer } from '@react-navigation/native';
import { createBottomTabNavigator } from '@react-navigation/bottom-tabs';
import Members from './Components/Members'
import Homepage from './Components/Homepage'
import SubscriptionsList from './Components/SubscriptionsList'


const Tab = createBottomTabNavigator();

export default function App() {
 return (
   <NavigationContainer>
     <Tab.Navigator>
       <Tab.Screen name="Accueil" component={Homepage} />
       <Tab.Screen name="Membres" component={Members} />
       <Tab.Screen name="Abonnements" component={SubscriptionsList} />
     </Tab.Navigator>
  </NavigationContainer>
 );
 }

我不知道我做错了什么。 我真的很感激一些帮助。 谢谢！

Answer 1

使用

export default [
{
   id:1,
   name: "Name",
   firstname: "Firstname",
   address: "some address",
   zipcode : 75000,
   city: "city",
   phone: "",
   email: "name.e@gmail.com"
},
{
    id:2,
    name: "Othername",
    firstname: "Otherfirstname",
    address: "Other address",
    zipcode : 75000,
    city: "City",
    phone: "0600000000",
    email: "name.first@gmail.com"
}

]