में स्क्रॉल स्थिति लॉक करना मैं एक फ्लैटलिस्ट बनाने की कोशिश कर रहा हूं जो वर्तमान स्क्रॉल स्थिति को लॉक रखता है और सूची के शीर्ष पर डाले गए नए आइटमों द्वारा नहीं बदला जाता है।FlatList (और स्क्रॉलव्यू)
मैंने अपना इरादा दिखाने के लिए expo snack बनाया है।
स्नैक हरे रंग की वस्तुओं के साथ एक स्क्रॉलव्यू प्रस्तुत करता है, और अंत में एक काला आइटम प्रस्तुत करता है। जब ऐप लॉन्च होता है तो यह सूची के नीचे स्क्रॉल करता है। पांच सेकंड के बाद शीर्ष पर 10 आइटम डाले जाते हैं, और स्क्रॉल स्थिति इन वस्तुओं के कुल आकार के अनुसार बदल रही है।
इस एक्सपो नाश्ता का कोड है:
import React, { Component } from 'react';
import { View, FlatList } from 'react-native';
const renderItem = ({ item }) => {
let backgroundColor;
if (item == 10) {
backgroundColor = "black"
}
else {
backgroundColor = item % 2 == 0 ? 'green' : 'blue'
}
return (
<View
style={{
width: 200,
height: 50,
backgroundColor,
margin: 10,
}}
/>
);
};
const MyList = class extends Component {
componentDidMount() {
setTimeout(() => this.ref.scrollToEnd({ animated: false }), 500);
}
render() {
return (
<FlatList
ref={r => this.ref = r}
data={this.props.data}
renderItem={this.props.renderItem}
/>
);
}
};
export default class App extends Component {
constructor(props) {
super(props);
this.state = {
items: [2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 10],
};
}
componentDidMount() {
const items = [...this.state.items];
items.unshift(1, 1, 1, 1, 1, 1, 1, 1, 1, 1);
setTimeout(() => this.setState({ items }), 5000);
}
render() {
return <MyList renderItem={renderItem} data={this.state.items} />;
}
}
मैं, बंद कर दिया स्क्रॉल स्थान बरकरार रखने के अर्थ चाहते हैं - जब आइटम डाला जाता है स्क्रॉल स्थिति नहीं बदलेगी (या कम से कम एक तरह से उपयोगकर्ता कुछ भी नहीं हुआ)
क्या FlatList और ScrollView के वर्तमान API के साथ ऐसा करने का कोई तरीका है? इस सुविधा को प्राप्त करने के लिए क्या लागू करने की आवश्यकता है?