React Native中高性能、超平滑的Masonry网格的使用教程

一个类似于FlatList的高性能、超平滑的Masonry网格。

如何使用它

1.安装并导入该组件。

# Yarn
$ yarn add react-native-masonry-grid

# NPM
$ npm i react-native-masonry-grid

import MasonryFlatlist from 'react-native-masonry-grid';

2.添加项目到Masonry网格。

// data 
const DATA = [
  {
    name: 'Item 1',
    url: '1.png',
    height: 136,
  },{
    name: 'Item 2',
    url: '2.png',
    height: 236,
  },{
    name: 'Item 3',
    url: '3.png',
    height: 336,
  }
  // ...
]
<MasonryFlatlist
  data={DATA}
  numColumns={3} //number of columns
  columnWrapperStyle={styles.columnWrapperStyle}
  showsVerticalScrollIndicator={false}
  style={styles.masonryFlatlist}
  renderItem={({ item, index }) => {
    return <Card data={item} height={item.height} onPress={() => {}} />;
  }}
/>

3.可用的组件道具。

interface Props extends ScrollViewProps {
  numColumns?: number;
  loading?: boolean;
  LoadingView?: React.ReactNode | React.ReactElement | null;
  columnWrapperStyle: StyleProp<ViewStyle>;
  ListHeaderComponent?: React.ReactNode | React.ReactElement | null;
  ListEmptyComponent?: typeof React.Fragment | React.ReactElement | null;
  ListFooterComponent?: React.ReactNode | React.ReactElement | null;
  ListHeaderComponentStyle?: StyleProp<ViewStyle>;
  contentContainerStyle?: StyleProp<ViewStyle>;
  containerStyle?: StyleProp<ViewStyle>;
  onRefresh?: RefreshControlProps['onRefresh'];
  onEndReached?: () => void;
  keyExtractor?: ((item: any, index: number) => string) | undefined;
  onEndReachedThreshold?: number;
  style?: StyleProp<ViewStyle>;
  data: any[];
  renderItem: ({ item, index }: { item: any; index: number }) => ReactElement;
}

预览

The postPerformant Masonry Grid Component For React Nativeappeared first onReactScript.