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

Question

我目前正在创建一个入门屏幕，它只是几个组件，通过单击按钮线性导航到下一个组件。 但是我已经看到我可以使用平面列表来更好地设置样式。是否可以将组件作为数据属性传递给平面列表？

     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>
      );
    }

例如，这可能吗？我知道有一个 renderItems 道具似乎做了类似的事情，但似乎将数据与我真正想要的项目相匹配。还有更好的吗？ 或者，如果有任何更好的库可用于 React Native 中的入职选项，那就太好了。我看到的大部分内容类似于平面列表，并且只添加了一个带有文本而不是输入等的数组

Answer 1

您还需要设置 renderItem 属性。设置<Item /> 组件的样式以满足您的要求。

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

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;

Answer 3

不明白您为什么要尝试处理您的组件。

要使用 Flatlist，您需要传递数据，然后使用您的组件。

在此处了解更多信息https://reactnative.dev/docs/flatlist

例子

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>
        );
    }
}