反应本机中的自定义平面列表项目

问题描述：

我正在尝试创建一个列表项列表。我设法使用https://facebook.github.io/react-native/docs/flatlist.html中的一个样本来构建一个。反应本机中的自定义平面列表项目

我想通过创建更复杂的东西来扩展这个，但我被卡住了。我正在尝试创建一个列表项目，如下所示。当然，我可以通过使用这些反应原生库之一来实现这一点，但我试图避免使用库，而不是使用库我想构建一个具有多个呈现器的平板列表组件，因为这种方法会给我更多的组件控制权。希望对此有帮助。

您是否试图在将其添加到列表之前拆分日期？在将数组放入列表之前，您还可以创建视图。比你只需在renderItem函数中返回项目本身。 – parohy

你可以使用['numColumns']（https://facebook.github.io/react-native/docs/flatlist.html#numcolumns） – bennygenel

我应该为每一行建立一个jsx吗？ –

答

实现这一目标最简单的方法是有一个行组件，并根据道具你决定如何渲染它。例如：

class Row extends React.PureComponent { 

    render(){ 
     const { item } = this.props 
     if(item.break){ 
     return <Text>Break</Text> 
     } 
     return (
     <View><Text>Normal item goes here</Text></View> 
    ) 
    } 
}

谢谢。这就说得通了。当我创建像出口缺省功能FlatList（{ 的ListData }：{ 的ListData：串 }）可共享flatlist部件{ 回报（） } renderRow将含有构建JSX的逻辑，但与此我碰到一个错误说“最大调用堆栈大小突破”。是否因为我无法将json字符串作为参数传递给我的自定义组件？ –

您不应该调用您的功能组件FlatList，因为当您在jsx中使用原始的FlatList时，它会将您的自定义函数引入递归。将其更改为只是列表 –

我不认为我们有一个反应原生列表。你是不是指ListView？ –

反应本机中的自定义平面列表项目

相关推荐