如何使用平面列表在react native中呈现组件

vulvrdjw 于 2022-11-17 发布在 React

关注(0)|答案(4)|浏览(153)

我目前正在创建一个onboarding屏幕，其中只有几个组件，单击按钮后可以线性导航到下一个组件。但是我发现我可以使用平面列表来更好地设计这个屏幕。是否可以将组件作为数据属性传递给平面列表？

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

例如，这是可能的吗？我知道有一个renderedItems属性，它似乎做了类似的事情，但似乎匹配的数据项目，这不是我真正想要的。有没有更好的？或者如果有任何更好的库，在React原生的onboarding选项，这将是伟大的。我看到的大多数类似于一个平面列表，并添加了一个数组与文本，而不是输入等

react-native

来源：https://stackoverflow.com/questions/67060675/how-can-you-use-a-flatlist-to-render-components-in-react-native

4条答案

按热度按时间

rwqw0loc1#

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;

赞(0）回复(0）举报 2022-11-17

odopli942#

您还需要设置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>
  );
};

赞(0）回复(0）举报 2022-11-17

g6ll5ycj3#

不明白你为什么要用你的组件。
要使用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>
        );
    }
}

赞(0）回复(0）举报 2022-11-17

3npbholx4#

const DATA = [
 <MyComponent />,
 <MyOtherComponent />,
 <Etc />,
 <Etc />,
]

 const ListItem = ({ item }) => {
   return <View> {item} </View>
  }

<View>
  <FlatList
    data={DATA}
    keyExtractor={(item, index) => String(index)}
    renderItem={ListItem}
  />
</View>

赞(0）回复(0）举报 2022-11-17

我来回答

如何使用平面列表在react native中呈现组件

4条答案

相关问题

热门标签

最新问答