如何使用平面列表在 React Native 中渲染组件

Question

I am currently creating an onboarding screen which is just a few components navigating linear to the next component on a button click. However I've seen I could use a flatlist to style this better. Is it possible to pass components to a flatlist as the data prop?

     import React from 'react';
    import { SafeAreaView, View, FlatList, StyleSheet, Text, StatusBar } from 'react-native';
   import DateOfBirth, Name, ProfilePicture from ‘./components’
    
    const DATA = [
      DateOfBirth, Name, ProfilePicture
    ];
   

 return (
        <SafeAreaView style={styles.container}>
          <FlatList
            data={DATA}
          />
        </SafeAreaView>
      );
    }

Would this be possible for example? I know there is a renderedItems prop which seems to do something similar but seems to match the data to the item which isn't what I really want. Is there anyway better? Or if there is any better libraries for onboarding options in react native that would be great. Most of what I see is similar to a flatlist and adds just an array with text rather than inputs etc

Answer 1

You also need to set the renderItem prop. Style the <Item /> component to meet your requirement.

const App = () => {
  const renderItem = ({ item }) => (
    <Item title={item.title} />
  );

  return (
    <SafeAreaView style={styles.container}>
      <FlatList
        data={DATA}
        renderItem={renderItem}
        keyExtractor={item => item.id}
      />
    </SafeAreaView>
  );
};

Answer 2

Don't understand why you're trying to do with your components.

To use Flatlist, you need to pass data and THEN use your components.

Learn more here https://reactnative.dev/docs/flatlist

Example

import React from 'react';
import { SafeAreaView, View, FlatList, StyleSheet, Text, StatusBar } from 'react-native';
import DateOfBirth, Name, ProfilePicture from ‘./components’
    
const DATA = [
    {
        name: "Jhon Doe",
        dateOfBirth: "01/01/1980",
        profilePicture: "https://url.com/profile.jpg"
    },
    {
        name: "Jane Doe",
        dateOfBirth: "02/01/1980",
        profilePicture: "https://url.com/profile2.jpg"
    }
];

const App = () => {
    function renderClient ({client}){
        return(
            <View key={client.index}>
                <Name name={client.item.name} />
            </View>
        )
    }

    return (
        <SafeAreaView style={styles.container}>
            <FlatList
                data={DATA}
                keyExtractor={(item, index) => index.toString()}
                renderItem={renderClient}
            />
        </SafeAreaView>
        );
    }
}

Answer 3

 import React from 'react'; import {View,Text,StyleSheet,FlatList} from 'react-native'; const Demo = () => { let ary = [ { id:1, name:'jahnavi', }, { id:2, name:'yash', }, { id:3, name:'aniket', }], return ( <SafeAreaView style={styles.container}> <FlatList keyExtractor={item => item.id} data={ary} renderItem={({item}) => (<Item title={item.name}/> ); } /> </SafeAreaView> ); }; export default Demo;