Add tests describing current sticky header realization behavior (#31075)
Summary: See https://github.com/react-native-community/discussions-and-proposals/pull/335 for extra context. A VirtualizedList may have sticky headers, forwarded on to ScrollView. These sticky headers are exempt from virtualization once realized for the first time. This change documents the behavior of keeping sticky header cells realized after scrolling away. This scenario performs the same behavior as creating an internal "realization window" for sticky headers with a single cell window size. Generalizing the concept of realization windows should be shaped to support the existing sticky header scenario. ## Changelog <!-- Help reviewers and the release process by writing your own changelog entry. For an example, see: https://github.com/facebook/react-native/wiki/Changelog --> [Internal] [Added] - Add tests describing current sticky header realization behavior Pull Request resolved: https://github.com/facebook/react-native/pull/31075 Reviewed By: lunaleaps Differential Revision: D26767582 Pulled By: appden fbshipit-source-id: 0d151bd6046fcb5384c646205aafa1ca7edf6c77
This commit is contained in:
Родитель
035718ba97
Коммит
4fb9e2f6a3
|
@ -504,4 +504,163 @@ describe('VirtualizedList', () => {
|
||||||
'scrollToIndex out of range: requested index 3 is out of 0 to 2',
|
'scrollToIndex out of range: requested index 3 is out of 0 to 2',
|
||||||
);
|
);
|
||||||
});
|
});
|
||||||
|
|
||||||
|
it('forwards correct stickyHeaderIndices when all in initial render window', () => {
|
||||||
|
const items = Array(10)
|
||||||
|
.fill()
|
||||||
|
.map((_, i) => (i % 3 === 0 ? {key: i, sticky: true} : {key: i}));
|
||||||
|
const stickyIndices = items
|
||||||
|
.filter(item => item.sticky)
|
||||||
|
.map(item => item.key);
|
||||||
|
|
||||||
|
const ITEM_HEIGHT = 10;
|
||||||
|
|
||||||
|
const component = ReactTestRenderer.create(
|
||||||
|
<VirtualizedList
|
||||||
|
data={items}
|
||||||
|
stickyHeaderIndices={stickyIndices}
|
||||||
|
initialNumToRender={10}
|
||||||
|
renderItem={({item}) => <item value={item.key} sticky={item.sticky} />}
|
||||||
|
getItem={(data, index) => data[index]}
|
||||||
|
getItemCount={data => data.length}
|
||||||
|
getItemLayout={(_, index) => ({
|
||||||
|
length: ITEM_HEIGHT,
|
||||||
|
offset: ITEM_HEIGHT * index,
|
||||||
|
index,
|
||||||
|
})}
|
||||||
|
/>,
|
||||||
|
);
|
||||||
|
|
||||||
|
expect(component).toMatchSnapshot();
|
||||||
|
});
|
||||||
|
|
||||||
|
it('forwards correct stickyHeaderIndices when partially in initial render window', () => {
|
||||||
|
const items = Array(10)
|
||||||
|
.fill()
|
||||||
|
.map((_, i) => (i % 3 === 0 ? {key: i, sticky: true} : {key: i}));
|
||||||
|
const stickyIndices = items
|
||||||
|
.filter(item => item.sticky)
|
||||||
|
.map(item => item.key);
|
||||||
|
|
||||||
|
const ITEM_HEIGHT = 10;
|
||||||
|
|
||||||
|
const component = ReactTestRenderer.create(
|
||||||
|
<VirtualizedList
|
||||||
|
data={items}
|
||||||
|
stickyHeaderIndices={stickyIndices}
|
||||||
|
initialNumToRender={5}
|
||||||
|
renderItem={({item}) => <item value={item.key} sticky={item.sticky} />}
|
||||||
|
getItem={(data, index) => data[index]}
|
||||||
|
getItemCount={data => data.length}
|
||||||
|
getItemLayout={(_, index) => ({
|
||||||
|
length: ITEM_HEIGHT,
|
||||||
|
offset: ITEM_HEIGHT * index,
|
||||||
|
index,
|
||||||
|
})}
|
||||||
|
/>,
|
||||||
|
);
|
||||||
|
|
||||||
|
expect(component).toMatchSnapshot();
|
||||||
|
});
|
||||||
|
|
||||||
|
it('realizes sticky headers in viewport on batched render', () => {
|
||||||
|
const items = Array(10)
|
||||||
|
.fill()
|
||||||
|
.map((_, i) => (i % 3 === 0 ? {key: i, sticky: true} : {key: i}));
|
||||||
|
const stickyIndices = items
|
||||||
|
.filter(item => item.sticky)
|
||||||
|
.map(item => item.key);
|
||||||
|
|
||||||
|
const ITEM_HEIGHT = 10;
|
||||||
|
|
||||||
|
const virtualizedListProps = {
|
||||||
|
data: items,
|
||||||
|
stickyHeaderIndices: stickyIndices,
|
||||||
|
initialNumToRender: 1,
|
||||||
|
windowSize: 1,
|
||||||
|
renderItem: ({item}) => <item value={item.key} sticky={item.sticky} />,
|
||||||
|
getItem: (data, index) => data[index],
|
||||||
|
getItemCount: data => data.length,
|
||||||
|
getItemLayout: (_, index) => ({
|
||||||
|
length: ITEM_HEIGHT,
|
||||||
|
offset: ITEM_HEIGHT * index,
|
||||||
|
index,
|
||||||
|
}),
|
||||||
|
};
|
||||||
|
|
||||||
|
let component;
|
||||||
|
|
||||||
|
ReactTestRenderer.act(() => {
|
||||||
|
component = ReactTestRenderer.create(
|
||||||
|
<VirtualizedList key={'A'} {...virtualizedListProps} />,
|
||||||
|
);
|
||||||
|
});
|
||||||
|
|
||||||
|
ReactTestRenderer.act(() => {
|
||||||
|
component
|
||||||
|
.getInstance()
|
||||||
|
._onLayout({nativeEvent: {layout: {width: 10, height: 50}}});
|
||||||
|
component.getInstance()._onContentSizeChange(10, 100);
|
||||||
|
jest.runAllTimers();
|
||||||
|
});
|
||||||
|
|
||||||
|
expect(component).toMatchSnapshot();
|
||||||
|
});
|
||||||
|
|
||||||
|
it('keeps sticky headers realized after scrolled out of viewport', () => {
|
||||||
|
const items = Array(20)
|
||||||
|
.fill()
|
||||||
|
.map((_, i) =>
|
||||||
|
i % 3 === 0 ? {key: i, sticky: true} : {key: i, sticky: false},
|
||||||
|
);
|
||||||
|
const stickyIndices = items
|
||||||
|
.filter(item => item.sticky)
|
||||||
|
.map(item => item.key);
|
||||||
|
|
||||||
|
const ITEM_HEIGHT = 10;
|
||||||
|
|
||||||
|
const virtualizedListProps = {
|
||||||
|
data: items,
|
||||||
|
stickyHeaderIndices: stickyIndices,
|
||||||
|
initialNumToRender: 1,
|
||||||
|
windowSize: 1,
|
||||||
|
renderItem: ({item}) => <item value={item.key} sticky={item.sticky} />,
|
||||||
|
getItem: (data, index) => data[index],
|
||||||
|
getItemCount: data => data.length,
|
||||||
|
getItemLayout: (_, index) => ({
|
||||||
|
length: ITEM_HEIGHT,
|
||||||
|
offset: ITEM_HEIGHT * index,
|
||||||
|
index,
|
||||||
|
}),
|
||||||
|
};
|
||||||
|
|
||||||
|
let component;
|
||||||
|
|
||||||
|
ReactTestRenderer.act(() => {
|
||||||
|
component = ReactTestRenderer.create(
|
||||||
|
<VirtualizedList key={'A'} {...virtualizedListProps} />,
|
||||||
|
);
|
||||||
|
});
|
||||||
|
|
||||||
|
ReactTestRenderer.act(() => {
|
||||||
|
component
|
||||||
|
.getInstance()
|
||||||
|
._onLayout({nativeEvent: {layout: {width: 10, height: 50}}});
|
||||||
|
component.getInstance()._onContentSizeChange(10, 200);
|
||||||
|
jest.runAllTimers();
|
||||||
|
});
|
||||||
|
|
||||||
|
ReactTestRenderer.act(() => {
|
||||||
|
component.getInstance()._onScroll({
|
||||||
|
nativeEvent: {
|
||||||
|
contentOffset: {x: 0, y: 150},
|
||||||
|
contentSize: {width: 10, height: 200},
|
||||||
|
layoutMeasurement: {width: 10, height: 50},
|
||||||
|
},
|
||||||
|
});
|
||||||
|
jest.runAllTimers();
|
||||||
|
});
|
||||||
|
|
||||||
|
expect(component).toMatchSnapshot();
|
||||||
|
});
|
||||||
});
|
});
|
||||||
|
|
|
@ -1,5 +1,269 @@
|
||||||
// Jest Snapshot v1, https://goo.gl/fbAQLP
|
// Jest Snapshot v1, https://goo.gl/fbAQLP
|
||||||
|
|
||||||
|
exports[`VirtualizedList forwards correct stickyHeaderIndices when all in initial render window 1`] = `
|
||||||
|
<RCTScrollView
|
||||||
|
data={
|
||||||
|
Array [
|
||||||
|
Object {
|
||||||
|
"key": 0,
|
||||||
|
"sticky": true,
|
||||||
|
},
|
||||||
|
Object {
|
||||||
|
"key": 1,
|
||||||
|
},
|
||||||
|
Object {
|
||||||
|
"key": 2,
|
||||||
|
},
|
||||||
|
Object {
|
||||||
|
"key": 3,
|
||||||
|
"sticky": true,
|
||||||
|
},
|
||||||
|
Object {
|
||||||
|
"key": 4,
|
||||||
|
},
|
||||||
|
Object {
|
||||||
|
"key": 5,
|
||||||
|
},
|
||||||
|
Object {
|
||||||
|
"key": 6,
|
||||||
|
"sticky": true,
|
||||||
|
},
|
||||||
|
Object {
|
||||||
|
"key": 7,
|
||||||
|
},
|
||||||
|
Object {
|
||||||
|
"key": 8,
|
||||||
|
},
|
||||||
|
Object {
|
||||||
|
"key": 9,
|
||||||
|
"sticky": true,
|
||||||
|
},
|
||||||
|
]
|
||||||
|
}
|
||||||
|
disableVirtualization={false}
|
||||||
|
getItem={[Function]}
|
||||||
|
getItemCount={[Function]}
|
||||||
|
getItemLayout={[Function]}
|
||||||
|
horizontal={false}
|
||||||
|
initialNumToRender={10}
|
||||||
|
keyExtractor={[Function]}
|
||||||
|
maxToRenderPerBatch={10}
|
||||||
|
onContentSizeChange={[Function]}
|
||||||
|
onEndReachedThreshold={2}
|
||||||
|
onLayout={[Function]}
|
||||||
|
onMomentumScrollBegin={[Function]}
|
||||||
|
onMomentumScrollEnd={[Function]}
|
||||||
|
onScroll={[Function]}
|
||||||
|
onScrollBeginDrag={[Function]}
|
||||||
|
onScrollEndDrag={[Function]}
|
||||||
|
renderItem={[Function]}
|
||||||
|
scrollEventThrottle={50}
|
||||||
|
stickyHeaderIndices={
|
||||||
|
Array [
|
||||||
|
0,
|
||||||
|
3,
|
||||||
|
6,
|
||||||
|
9,
|
||||||
|
]
|
||||||
|
}
|
||||||
|
updateCellsBatchingPeriod={50}
|
||||||
|
windowSize={21}
|
||||||
|
>
|
||||||
|
<View>
|
||||||
|
<View
|
||||||
|
style={null}
|
||||||
|
>
|
||||||
|
<item
|
||||||
|
sticky={true}
|
||||||
|
value={0}
|
||||||
|
/>
|
||||||
|
</View>
|
||||||
|
<View
|
||||||
|
style={null}
|
||||||
|
>
|
||||||
|
<item
|
||||||
|
value={1}
|
||||||
|
/>
|
||||||
|
</View>
|
||||||
|
<View
|
||||||
|
style={null}
|
||||||
|
>
|
||||||
|
<item
|
||||||
|
value={2}
|
||||||
|
/>
|
||||||
|
</View>
|
||||||
|
<View
|
||||||
|
style={null}
|
||||||
|
>
|
||||||
|
<item
|
||||||
|
sticky={true}
|
||||||
|
value={3}
|
||||||
|
/>
|
||||||
|
</View>
|
||||||
|
<View
|
||||||
|
style={null}
|
||||||
|
>
|
||||||
|
<item
|
||||||
|
value={4}
|
||||||
|
/>
|
||||||
|
</View>
|
||||||
|
<View
|
||||||
|
style={null}
|
||||||
|
>
|
||||||
|
<item
|
||||||
|
value={5}
|
||||||
|
/>
|
||||||
|
</View>
|
||||||
|
<View
|
||||||
|
style={null}
|
||||||
|
>
|
||||||
|
<item
|
||||||
|
sticky={true}
|
||||||
|
value={6}
|
||||||
|
/>
|
||||||
|
</View>
|
||||||
|
<View
|
||||||
|
style={null}
|
||||||
|
>
|
||||||
|
<item
|
||||||
|
value={7}
|
||||||
|
/>
|
||||||
|
</View>
|
||||||
|
<View
|
||||||
|
style={null}
|
||||||
|
>
|
||||||
|
<item
|
||||||
|
value={8}
|
||||||
|
/>
|
||||||
|
</View>
|
||||||
|
<View
|
||||||
|
style={null}
|
||||||
|
>
|
||||||
|
<item
|
||||||
|
sticky={true}
|
||||||
|
value={9}
|
||||||
|
/>
|
||||||
|
</View>
|
||||||
|
</View>
|
||||||
|
</RCTScrollView>
|
||||||
|
`;
|
||||||
|
|
||||||
|
exports[`VirtualizedList forwards correct stickyHeaderIndices when partially in initial render window 1`] = `
|
||||||
|
<RCTScrollView
|
||||||
|
data={
|
||||||
|
Array [
|
||||||
|
Object {
|
||||||
|
"key": 0,
|
||||||
|
"sticky": true,
|
||||||
|
},
|
||||||
|
Object {
|
||||||
|
"key": 1,
|
||||||
|
},
|
||||||
|
Object {
|
||||||
|
"key": 2,
|
||||||
|
},
|
||||||
|
Object {
|
||||||
|
"key": 3,
|
||||||
|
"sticky": true,
|
||||||
|
},
|
||||||
|
Object {
|
||||||
|
"key": 4,
|
||||||
|
},
|
||||||
|
Object {
|
||||||
|
"key": 5,
|
||||||
|
},
|
||||||
|
Object {
|
||||||
|
"key": 6,
|
||||||
|
"sticky": true,
|
||||||
|
},
|
||||||
|
Object {
|
||||||
|
"key": 7,
|
||||||
|
},
|
||||||
|
Object {
|
||||||
|
"key": 8,
|
||||||
|
},
|
||||||
|
Object {
|
||||||
|
"key": 9,
|
||||||
|
"sticky": true,
|
||||||
|
},
|
||||||
|
]
|
||||||
|
}
|
||||||
|
disableVirtualization={false}
|
||||||
|
getItem={[Function]}
|
||||||
|
getItemCount={[Function]}
|
||||||
|
getItemLayout={[Function]}
|
||||||
|
horizontal={false}
|
||||||
|
initialNumToRender={5}
|
||||||
|
keyExtractor={[Function]}
|
||||||
|
maxToRenderPerBatch={10}
|
||||||
|
onContentSizeChange={[Function]}
|
||||||
|
onEndReachedThreshold={2}
|
||||||
|
onLayout={[Function]}
|
||||||
|
onMomentumScrollBegin={[Function]}
|
||||||
|
onMomentumScrollEnd={[Function]}
|
||||||
|
onScroll={[Function]}
|
||||||
|
onScrollBeginDrag={[Function]}
|
||||||
|
onScrollEndDrag={[Function]}
|
||||||
|
renderItem={[Function]}
|
||||||
|
scrollEventThrottle={50}
|
||||||
|
stickyHeaderIndices={
|
||||||
|
Array [
|
||||||
|
0,
|
||||||
|
3,
|
||||||
|
]
|
||||||
|
}
|
||||||
|
updateCellsBatchingPeriod={50}
|
||||||
|
windowSize={21}
|
||||||
|
>
|
||||||
|
<View>
|
||||||
|
<View
|
||||||
|
style={null}
|
||||||
|
>
|
||||||
|
<item
|
||||||
|
sticky={true}
|
||||||
|
value={0}
|
||||||
|
/>
|
||||||
|
</View>
|
||||||
|
<View
|
||||||
|
style={null}
|
||||||
|
>
|
||||||
|
<item
|
||||||
|
value={1}
|
||||||
|
/>
|
||||||
|
</View>
|
||||||
|
<View
|
||||||
|
style={null}
|
||||||
|
>
|
||||||
|
<item
|
||||||
|
value={2}
|
||||||
|
/>
|
||||||
|
</View>
|
||||||
|
<View
|
||||||
|
style={null}
|
||||||
|
>
|
||||||
|
<item
|
||||||
|
sticky={true}
|
||||||
|
value={3}
|
||||||
|
/>
|
||||||
|
</View>
|
||||||
|
<View
|
||||||
|
style={null}
|
||||||
|
>
|
||||||
|
<item
|
||||||
|
value={4}
|
||||||
|
/>
|
||||||
|
</View>
|
||||||
|
<View
|
||||||
|
style={
|
||||||
|
Object {
|
||||||
|
"height": 50,
|
||||||
|
}
|
||||||
|
}
|
||||||
|
/>
|
||||||
|
</View>
|
||||||
|
</RCTScrollView>
|
||||||
|
`;
|
||||||
|
|
||||||
exports[`VirtualizedList handles nested lists 1`] = `
|
exports[`VirtualizedList handles nested lists 1`] = `
|
||||||
<RCTScrollView
|
<RCTScrollView
|
||||||
data={
|
data={
|
||||||
|
@ -409,6 +673,362 @@ exports[`VirtualizedList handles separators correctly 3`] = `
|
||||||
</RCTScrollView>
|
</RCTScrollView>
|
||||||
`;
|
`;
|
||||||
|
|
||||||
|
exports[`VirtualizedList keeps sticky headers realized after scrolled out of viewport 1`] = `
|
||||||
|
<RCTScrollView
|
||||||
|
data={
|
||||||
|
Array [
|
||||||
|
Object {
|
||||||
|
"key": 0,
|
||||||
|
"sticky": true,
|
||||||
|
},
|
||||||
|
Object {
|
||||||
|
"key": 1,
|
||||||
|
"sticky": false,
|
||||||
|
},
|
||||||
|
Object {
|
||||||
|
"key": 2,
|
||||||
|
"sticky": false,
|
||||||
|
},
|
||||||
|
Object {
|
||||||
|
"key": 3,
|
||||||
|
"sticky": true,
|
||||||
|
},
|
||||||
|
Object {
|
||||||
|
"key": 4,
|
||||||
|
"sticky": false,
|
||||||
|
},
|
||||||
|
Object {
|
||||||
|
"key": 5,
|
||||||
|
"sticky": false,
|
||||||
|
},
|
||||||
|
Object {
|
||||||
|
"key": 6,
|
||||||
|
"sticky": true,
|
||||||
|
},
|
||||||
|
Object {
|
||||||
|
"key": 7,
|
||||||
|
"sticky": false,
|
||||||
|
},
|
||||||
|
Object {
|
||||||
|
"key": 8,
|
||||||
|
"sticky": false,
|
||||||
|
},
|
||||||
|
Object {
|
||||||
|
"key": 9,
|
||||||
|
"sticky": true,
|
||||||
|
},
|
||||||
|
Object {
|
||||||
|
"key": 10,
|
||||||
|
"sticky": false,
|
||||||
|
},
|
||||||
|
Object {
|
||||||
|
"key": 11,
|
||||||
|
"sticky": false,
|
||||||
|
},
|
||||||
|
Object {
|
||||||
|
"key": 12,
|
||||||
|
"sticky": true,
|
||||||
|
},
|
||||||
|
Object {
|
||||||
|
"key": 13,
|
||||||
|
"sticky": false,
|
||||||
|
},
|
||||||
|
Object {
|
||||||
|
"key": 14,
|
||||||
|
"sticky": false,
|
||||||
|
},
|
||||||
|
Object {
|
||||||
|
"key": 15,
|
||||||
|
"sticky": true,
|
||||||
|
},
|
||||||
|
Object {
|
||||||
|
"key": 16,
|
||||||
|
"sticky": false,
|
||||||
|
},
|
||||||
|
Object {
|
||||||
|
"key": 17,
|
||||||
|
"sticky": false,
|
||||||
|
},
|
||||||
|
Object {
|
||||||
|
"key": 18,
|
||||||
|
"sticky": true,
|
||||||
|
},
|
||||||
|
Object {
|
||||||
|
"key": 19,
|
||||||
|
"sticky": false,
|
||||||
|
},
|
||||||
|
]
|
||||||
|
}
|
||||||
|
disableVirtualization={false}
|
||||||
|
getItem={[Function]}
|
||||||
|
getItemCount={[Function]}
|
||||||
|
getItemLayout={[Function]}
|
||||||
|
horizontal={false}
|
||||||
|
initialNumToRender={1}
|
||||||
|
keyExtractor={[Function]}
|
||||||
|
maxToRenderPerBatch={10}
|
||||||
|
onContentSizeChange={[Function]}
|
||||||
|
onEndReachedThreshold={2}
|
||||||
|
onLayout={[Function]}
|
||||||
|
onMomentumScrollBegin={[Function]}
|
||||||
|
onMomentumScrollEnd={[Function]}
|
||||||
|
onScroll={[Function]}
|
||||||
|
onScrollBeginDrag={[Function]}
|
||||||
|
onScrollEndDrag={[Function]}
|
||||||
|
renderItem={[Function]}
|
||||||
|
scrollEventThrottle={50}
|
||||||
|
stickyHeaderIndices={
|
||||||
|
Array [
|
||||||
|
0,
|
||||||
|
2,
|
||||||
|
4,
|
||||||
|
7,
|
||||||
|
10,
|
||||||
|
13,
|
||||||
|
]
|
||||||
|
}
|
||||||
|
updateCellsBatchingPeriod={50}
|
||||||
|
windowSize={1}
|
||||||
|
>
|
||||||
|
<View>
|
||||||
|
<View
|
||||||
|
style={null}
|
||||||
|
>
|
||||||
|
<item
|
||||||
|
sticky={true}
|
||||||
|
value={0}
|
||||||
|
/>
|
||||||
|
</View>
|
||||||
|
<View
|
||||||
|
style={
|
||||||
|
Object {
|
||||||
|
"height": 50,
|
||||||
|
}
|
||||||
|
}
|
||||||
|
/>
|
||||||
|
<View
|
||||||
|
style={null}
|
||||||
|
>
|
||||||
|
<item
|
||||||
|
sticky={true}
|
||||||
|
value={6}
|
||||||
|
/>
|
||||||
|
</View>
|
||||||
|
<View
|
||||||
|
style={
|
||||||
|
Object {
|
||||||
|
"height": 20,
|
||||||
|
}
|
||||||
|
}
|
||||||
|
/>
|
||||||
|
<View
|
||||||
|
style={null}
|
||||||
|
>
|
||||||
|
<item
|
||||||
|
sticky={true}
|
||||||
|
value={9}
|
||||||
|
/>
|
||||||
|
</View>
|
||||||
|
<View
|
||||||
|
style={null}
|
||||||
|
>
|
||||||
|
<item
|
||||||
|
sticky={false}
|
||||||
|
value={10}
|
||||||
|
/>
|
||||||
|
</View>
|
||||||
|
<View
|
||||||
|
style={null}
|
||||||
|
>
|
||||||
|
<item
|
||||||
|
sticky={false}
|
||||||
|
value={11}
|
||||||
|
/>
|
||||||
|
</View>
|
||||||
|
<View
|
||||||
|
style={null}
|
||||||
|
>
|
||||||
|
<item
|
||||||
|
sticky={true}
|
||||||
|
value={12}
|
||||||
|
/>
|
||||||
|
</View>
|
||||||
|
<View
|
||||||
|
style={null}
|
||||||
|
>
|
||||||
|
<item
|
||||||
|
sticky={false}
|
||||||
|
value={13}
|
||||||
|
/>
|
||||||
|
</View>
|
||||||
|
<View
|
||||||
|
style={null}
|
||||||
|
>
|
||||||
|
<item
|
||||||
|
sticky={false}
|
||||||
|
value={14}
|
||||||
|
/>
|
||||||
|
</View>
|
||||||
|
<View
|
||||||
|
style={null}
|
||||||
|
>
|
||||||
|
<item
|
||||||
|
sticky={true}
|
||||||
|
value={15}
|
||||||
|
/>
|
||||||
|
</View>
|
||||||
|
<View
|
||||||
|
style={null}
|
||||||
|
>
|
||||||
|
<item
|
||||||
|
sticky={false}
|
||||||
|
value={16}
|
||||||
|
/>
|
||||||
|
</View>
|
||||||
|
<View
|
||||||
|
style={null}
|
||||||
|
>
|
||||||
|
<item
|
||||||
|
sticky={false}
|
||||||
|
value={17}
|
||||||
|
/>
|
||||||
|
</View>
|
||||||
|
<View
|
||||||
|
style={null}
|
||||||
|
>
|
||||||
|
<item
|
||||||
|
sticky={true}
|
||||||
|
value={18}
|
||||||
|
/>
|
||||||
|
</View>
|
||||||
|
<View
|
||||||
|
style={null}
|
||||||
|
>
|
||||||
|
<item
|
||||||
|
sticky={false}
|
||||||
|
value={19}
|
||||||
|
/>
|
||||||
|
</View>
|
||||||
|
</View>
|
||||||
|
</RCTScrollView>
|
||||||
|
`;
|
||||||
|
|
||||||
|
exports[`VirtualizedList realizes sticky headers in viewport on batched render 1`] = `
|
||||||
|
<RCTScrollView
|
||||||
|
data={
|
||||||
|
Array [
|
||||||
|
Object {
|
||||||
|
"key": 0,
|
||||||
|
"sticky": true,
|
||||||
|
},
|
||||||
|
Object {
|
||||||
|
"key": 1,
|
||||||
|
},
|
||||||
|
Object {
|
||||||
|
"key": 2,
|
||||||
|
},
|
||||||
|
Object {
|
||||||
|
"key": 3,
|
||||||
|
"sticky": true,
|
||||||
|
},
|
||||||
|
Object {
|
||||||
|
"key": 4,
|
||||||
|
},
|
||||||
|
Object {
|
||||||
|
"key": 5,
|
||||||
|
},
|
||||||
|
Object {
|
||||||
|
"key": 6,
|
||||||
|
"sticky": true,
|
||||||
|
},
|
||||||
|
Object {
|
||||||
|
"key": 7,
|
||||||
|
},
|
||||||
|
Object {
|
||||||
|
"key": 8,
|
||||||
|
},
|
||||||
|
Object {
|
||||||
|
"key": 9,
|
||||||
|
"sticky": true,
|
||||||
|
},
|
||||||
|
]
|
||||||
|
}
|
||||||
|
disableVirtualization={false}
|
||||||
|
getItem={[Function]}
|
||||||
|
getItemCount={[Function]}
|
||||||
|
getItemLayout={[Function]}
|
||||||
|
horizontal={false}
|
||||||
|
initialNumToRender={1}
|
||||||
|
keyExtractor={[Function]}
|
||||||
|
maxToRenderPerBatch={10}
|
||||||
|
onContentSizeChange={[Function]}
|
||||||
|
onEndReachedThreshold={2}
|
||||||
|
onLayout={[Function]}
|
||||||
|
onMomentumScrollBegin={[Function]}
|
||||||
|
onMomentumScrollEnd={[Function]}
|
||||||
|
onScroll={[Function]}
|
||||||
|
onScrollBeginDrag={[Function]}
|
||||||
|
onScrollEndDrag={[Function]}
|
||||||
|
renderItem={[Function]}
|
||||||
|
scrollEventThrottle={50}
|
||||||
|
stickyHeaderIndices={
|
||||||
|
Array [
|
||||||
|
0,
|
||||||
|
3,
|
||||||
|
]
|
||||||
|
}
|
||||||
|
updateCellsBatchingPeriod={50}
|
||||||
|
windowSize={1}
|
||||||
|
>
|
||||||
|
<View>
|
||||||
|
<View
|
||||||
|
style={null}
|
||||||
|
>
|
||||||
|
<item
|
||||||
|
sticky={true}
|
||||||
|
value={0}
|
||||||
|
/>
|
||||||
|
</View>
|
||||||
|
<View
|
||||||
|
style={null}
|
||||||
|
>
|
||||||
|
<item
|
||||||
|
value={1}
|
||||||
|
/>
|
||||||
|
</View>
|
||||||
|
<View
|
||||||
|
style={null}
|
||||||
|
>
|
||||||
|
<item
|
||||||
|
value={2}
|
||||||
|
/>
|
||||||
|
</View>
|
||||||
|
<View
|
||||||
|
style={null}
|
||||||
|
>
|
||||||
|
<item
|
||||||
|
sticky={true}
|
||||||
|
value={3}
|
||||||
|
/>
|
||||||
|
</View>
|
||||||
|
<View
|
||||||
|
style={null}
|
||||||
|
>
|
||||||
|
<item
|
||||||
|
value={4}
|
||||||
|
/>
|
||||||
|
</View>
|
||||||
|
<View
|
||||||
|
style={
|
||||||
|
Object {
|
||||||
|
"height": 50,
|
||||||
|
}
|
||||||
|
}
|
||||||
|
/>
|
||||||
|
</View>
|
||||||
|
</RCTScrollView>
|
||||||
|
`;
|
||||||
|
|
||||||
exports[`VirtualizedList renders all the bells and whistles 1`] = `
|
exports[`VirtualizedList renders all the bells and whistles 1`] = `
|
||||||
<RCTScrollView
|
<RCTScrollView
|
||||||
ItemSeparatorComponent={[Function]}
|
ItemSeparatorComponent={[Function]}
|
||||||
|
|
Загрузка…
Ссылка в новой задаче