Реактивный nativeList отображает пустой экран - PullRequest
Новая
       3

Реактивный nativeList отображает пустой экран

0 голосов
/ 16 марта 2020

Я действительно новичок в реакции-родной. Я пытаюсь сделать плоский список. Сначала это работало, но потом я добавил нижнюю панель вкладок, а потом уже не работало. Я пытался go вернуться назад и удалить нижнюю панель вкладок, но у меня всегда есть ошибка. Последний был "не могу найти данные". И теперь, ничего не меняя, у меня просто пустой экран.

Мой код: 

// 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"
}

]

The flatList: 

// 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

Приложение. 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>
 );
 }

Я не знаю, что я сделал не так. Буду очень признателен за помощь. Спасибо!

1 Ответ

0 голосов
/ 16 марта 2020

использование 

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"
}

]
...