Реализация плоского списка - PullRequest
Новая
       5

Реализация плоского списка

0 голосов
/ 31 октября 2018

Я работаю над плоским списком, чтобы добавить простой текст. я новичок в реакции Всякий раз, когда я запускаю приложение, я получаю один и тот же экран. Я получаю тот же экран, который приходит по умолчанию в app.js. Я сделал один компонент класса BasicFlatList. Мой код 

import React, { Component } from 'react';
import { AppRegistry, FlatList, StyleSheet, Text, View } from 'react-native';
import flatListData from '../data/flatListData';

class FlatListItem extends Component {
render() {          
   return (
   <View style={{ flex: 1, backgroundColor: this.props.index % 2 == 0 ? 
  'mediumseagreen': 'tomato' }}>            
   <Text style={styles.flatListItem}>
   {this.props.item.name}</Text>
   <Text style={styles.flatListItem}>
   {this.props.item.foodDescription}</Text>
    </View>
    );
    }
     }
   const styles = StyleSheet.create({flatListItem: {color: 'white',
   padding: 10,fontSize: 16,} });

   export default class BasicFlatList extends Component {
    render() {
    return (<View style={{flex: 1, marginTop: 22}}>
     <FlatList data={flatListData}
     renderItem={({item, index})=>{
     return (
     <FlatListItem item={item} index={index}>

     </FlatListItem>);
       }}>
     </FlatList>
        </View>
         ); } }

and then i made data folder in which i make a file flatListData. in this i have added the data.

и в index.js я добавил BasicFlatList. мой код 

   import React, { Component } from 'react';
   import { AppRegistry } from 'react-native';
   import BasicFlatList from './components/BasicFlatList';

   AppRegistry.registerComponent('Flatlist', () => BasicFlatList);

1 Ответ

0 голосов
/ 31 октября 2018

используйте FlatList вот так, 

      <FlatList
        data={flatListData}
        renderItem={({ item, index }) => (
          <FlatListItem
            item={item},
            index={index}
          />
        )}
      />
...