Я работаю над новостным приложением, и это экраны с подробностями новостей, оно отображает все подробности новостей, но я хочу отображать следующие новости ниже этого, когда будет достигнут конец. Мне удается получить подробности о новых новостях с помощью метода isCloseToBottom, и я могу отображать новые новости, но старые заменяются, но я не хочу, чтобы старые новости исчезали. Есть ли обходной путь для этого?
class NewsDetails extends React.Component {
constructor(props) {
super(props);
this.state = {
visible: false,
loaded: false,
article: {},
request_control:1
};
}
componentWillMount() {
const { params } = this.props.navigation.state;
console.log(params.id);
axios
.get(`${URL_NEWS_DETAILS}/${params.id}`)
.then(response =>
this.setState({
article: response.data,
loaded: true,
})
)
.catch(error => console.log(error));
}
_onRefresh=()=>{
this.setState({refreshing: true})
axios.get(`${URL_NEWS_DETAILS}/210971`) //test with constant id
.then(response =>
this.setState({
article: response.data,
loaded: true,
})
)
.catch(error => console.log(error));
this.setState({refreshing: false});
};
renderNext=()=>{
if(this.state.request_control===1) {
this.setState({request_control: 0});
axios.get(`${URL_NEWS_DETAILS}/210971`) //test with constant id
.then(response => {
this.setState({
request_control:1,
article: response.data,
loaded: true
})
},
)
.catch(error => {
this.setState({ loaded: true})
console.log(error)
})
}
};
render() {
if (this.state.loaded) {
return (
<View style={styles.container}>
<ScrollView showsVerticalScrollIndicator={false}
onScroll={({nativeEvent}) => {
if (isCloseToBottom(nativeEvent)) {
this.renderNext()
}
}}
scrollEventThrottle={400}
refreshControl={
<RefreshControl
refreshing={this.state.refreshing}
onRefresh={this._onRefresh.bind(this)}
/>
}>
<Text style={styles.title}>
{this.state.article.title.rendered.replace("–", "-")}
</Text>
<View
style={{ marginTop: 10, marginBottom: 10, flexDirection: 'row', alignItems: 'center' }}>
<Image
style={{ width: 18, height: 18 }}
source={require('../../img/icon.png')}
/>
<Text style={{ fontFamily: 'Open Sans Bold', fontSize: 14 }}>
{' '}
{this.state.article.author}
</Text>
<Text style={{ fontFamily: 'Open Sans Regular', fontSize: 13 }}>
{' '}
në{' '}
</Text>
{this.state.article.categories.map(category => {
return (
<Text
style={{
fontFamily: 'Open Sans Regular',
fontSize: 13,
color: '#F33A22',
}}>
{category.name},{' '}
</Text>
);
})}
</View>
<Lightbox underlayColor="white">
<Image
style={styles.image}
source={{ uri: this.state.article.featured_image_url }}
/>
</Lightbox>
<HTMLView
value={'<div>' + this.state.article.content.raw + '</div>'}
renderNode={Platform.OS === 'android' ? this.renderNode : null}
stylesheet={htmlStyles}
/>
{/*HERE I NEED TO RENDER A NEW NEWS BELOW THE MAIN ONE, */}
{/*TO CREATE AN EFFECT LIKE USED IN WEB THAT DISPLAYS NEWS AFTER NEWS*/}
</ScrollView>
</View>
);
} else return <Spinner />;
}
}