模拟不同页面的平面列表答案

【问题标题】：Flatlist simulating different pages模拟不同页面的平面列表
【发布时间】：2021-08-16 12:26:15
【问题描述】：

我必须构建 5 个页面，但由于它们具有所有相同的布局，我想使用平面列表来填充字段，我怀疑我们基本不同，我阅读了文档并且有问题要完全理解，这是我的代码

const DATA = [
  {
    picture: '../../Components/Images/wellbeing.png',
    text1: 'Get weekly overviews and find',
    text2: 'out whats impacting your health',
    text3: 'and wellness',
    percent: 20,
  },
];

const Item = ({picture, text1, text2, text3, percent}) => (
    <View style={styles.container}>
      <View>
        <Image source={require({picture})} style={styles.image} />
      </View>

      <View style={styles.text_field}>
        <Text style={styles.textContent}> {text1} </Text>
        <Text style={styles.textContent}> {text2} </Text>
        <Text style={styles.textContent}> {text3} </Text>
      </View>

      <View style={styles.footer}>
        <TouchableOpacity onPress={() => navigation.navigate('HabitTracking')}>
          <ProgressCircle
            percent={{percent}}
            radius={30}
            borderWidth={3}
            color="#3399FF"
            shadowColor="white"
            bgColor="blue">
            <Icon name="arrowright" size={25} color="white"></Icon>
          </ProgressCircle>
        </TouchableOpacity>
      </View>
    </View>
    );

我在如何在课堂上填充这个问题时遇到了麻烦，这是我目前所拥有的

const Wellcome = () => {
    const renderItem = ({picture, text1, text2, text3, percent}) => (
        <Item picture={Item.picture}
        
        />
    );
  return (
    
  );
};

export default Wellcome;

我做错了吗？如果您需要任何进一步的信息，请告诉我

【问题讨论】：

您有一些基本错误。这里是 const renderItem = ({item}) => ( )

标签： react-native react-native-flatlist

【解决方案1】：

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

并在您的渲染方法中调用 renderItem

...
{renderItem(item)}
...

项目看起来像...

{
  picture: 'something',
  text1: 'something',
  text2: 'something',
  text3: 'something',
  percent: 'something'
}

【讨论】：