React Native 中的自定义平面列表项

Question

我正在尝试创建一个包含列表项的平面列表。我设法使用 https://facebook.github.io/react-native/docs/flatlist.html.

中的示例之一构建了一个

我试图通过创建更复杂的东西来扩展它，但我被卡住了。我正在尝试创建一个包含如下列表项的平面列表。当然，我可以通过使用其中一个反应本机库来实现这一点，但我试图避免使用库，而是我想构建一个具有多个渲染器的平面列表组件，因为这种方法可以让我更好地控制组件。对此有任何帮助将不胜感激。

Answer 1

实现它的最简单方法是拥有一个 Row 组件，并根据道具确定如何呈现它。示例：

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

React Native 中的自定义平面列表项

Custom flat list items in react native

react-native

react-native-flatlist