实施清单

Question

我正在处理清单，只是为了添加简单的文本。我是React Native的新手。每当我运行该应用程序时，我都会得到相同的屏幕。我正在选择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);

Answer 1

像这样使用FlatList，

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