サンプルコード（Function型コンポーネント）を使って、
まず、1から１００までをそれぞれのアイテムにひょうじするだけの単純なリストを作成してみます。
下記Youtube動画参照します。
How to use RecyclerListView with React Native. A great FlatList alternative! (youtube.com)
/***
Use this component inside your React Native Application.
A scrollable list with different item type
*/
import { useState } from 'react';
import { View, Text, Dimensions } from "react-native";
import { RecyclerListView, DataProvider, LayoutProvider, BaseItemAnimator} from "recyclerlistview";
const ViewTypes = {
BLUE: 0,
YELLOW: 1,
GREEN: 2
};
function CellContainer(props){
return <View {...props}>{props.children}</View>;
}
/***
* To test out just copy this component and render in you root component
*/
export default function App(){
const { width } = Dimensions.get("window");
//Create the data provider and provide method which takes in two rows of data and return if those two are different or not.
//THIS IS VERY IMPORTANT, FORGET PERFORMANCE IF THIS IS MESSED UP
let dataProvider = new DataProvider((r1, r2) => {
return r1 !== r2;
});
//Create the layout provider
//First method: Given an index return the type of item e.g ListItemType1, ListItemType2 in case you have variety of items in your list/grid
//Second: Given a type and object set the exact height and width for that type on given object, if you're using non deterministic rendering provide close estimates
//If you need data based check you can access your data provider here
//You'll need data in most cases, we don't provide it by default to enable things like data virtualization in the future
//NOTE: For complex lists LayoutProvider will also be complex it would then make sense to move it to a different file
const _layoutProvider = new LayoutProvider(
index => {
if (index % 3 === 0) {
return ViewTypes.BLUE;
} else if (index % 3 === 1) {
return ViewTypes.YELLOW;
} else {
return ViewTypes.GREEN;
}
},
(type, dim) => {
switch (type) {
case ViewTypes.YELLOW:
dim.width = width;
dim.height = 160;
break;
case ViewTypes.GREEN:
dim.width = width;
dim.height = 160;
break;
case ViewTypes.BLUE:
dim.width = width;
dim.height = 160;
break;
default:
dim.width = 0;
dim.height = 0;
}
}
);
const _generateArray = (n) => {
let arr = new Array(n);
for (let i = 0; i < n; i++) {
arr[i] = i;
}
return arr;
}
//Given type and data return the view component
const _rowRenderer = (type, data) =>{
//You can return any view here, CellContainer has no special significance
switch (type) {
case ViewTypes.YELLOW:
return (
<CellContainer style={styles.containerGridLeft}>
<Text>Data: {data}</Text>
</CellContainer>
);
case ViewTypes.GREEN:
return (
<CellContainer style={styles.containerGridRight}>
<Text>Data: {data}</Text>
</CellContainer>
);
case ViewTypes.BLUE:
return (
<CellContainer style={styles.container}>
<Text>Data: {data}</Text>
</CellContainer>
);
default:
return null;
}
}
const [dataProviderState,setDataProvider] = useState(dataProvider.cloneWithRows(_generateArray(300)));
return <RecyclerListView
layoutProvider={_layoutProvider}
dataProvider={dataProviderState}
rowRenderer={_rowRenderer} />;
}
const styles = {
container: {
justifyContent: "space-around",
alignItems: "center",
backgroundColor: "#00a1f1"
},
containerGridLeft: {
justifyContent: "space-around",
alignItems: "center",
backgroundColor: "#ffbb00"
},
containerGridRight: {
justifyContent: "space-around",
alignItems: "center",
backgroundColor: "#7cbb00"
}
};
WordPressHPへ移行中
