就是第一次加载时能加载出相应的数据,在后来加载更多的时候,状态机里的 dataArray 改变了,但是页面不会动态刷新,一般要怎么做才行,刚接触 RN 还不是很懂这个机制
render 代码
renderData() {
return (
<View>
{this.state.dataArray.length !== 0 ? <SectionList
renderItem={this.renderItemView}
renderSectionHeader={this.renderListHeaderView}
showsVerticalScrollIndicator={false}
sections={this.state.dataArray}
/> : <View/>}
</View>
);
}
render() {
return this.renderData();
}
调用代码
loadHome() {
const {navigate} = this.props.navigation;
if (!this.state.isRefreshing) {
return (
<View>
{/* 将 this 对象传过去 */}
<ScrollImage navigate={navigate} _home={this}/>
<NewsView navigate={navigate} _home={this}/>
</View>
)
} else {
return (
<View/>
)
}
}
render() {
const {navigate} = this.props.navigation;
return (
<ScrollView
ref='ScrollView'
style={{backgroundColor: '#F3F3F3'}}
onScroll={this._onScroll.bind(this)}
scrollEventThrottle={50}
refreshControl={
<RefreshControl
refreshing={this.state.isRefreshing}
onRefresh={this._onRefresh.bind(this)}
colors={['#00A2ED']}
progressBackgroundColor="#ffffff"/>
}>
{this.loadHome()}
</ScrollView>
);
}
1
Daemon1993 2017-09-18 11:47:35 +08:00 1
在接受新数据的时候 setState({}) 来改变数组
我前面用 redux 是在 componentWillReceiveProps 页面接受新数据 建议看看 RN 组件的生命周期 https://www.race604.com/react-native-component-lifecycle/ |
2
boyxy120 OP @Daemon1993
似乎是 SectionList 这个组件的坑,不是生命周期的问题 本组件继承自 PureComponent 而非通常的 Component,这意味着如果其 props 在浅比较中是相等的,则不会重新渲染。所以请先检查你的 renderItem 函数所依赖的 props 数据(包括 data 属性以及可能用到的父组件的 state ),如果是一个引用类型( Object 或者数组都是引用类型),则需要先修改其引用地址(比如先复制到一个新的 Object 或者数组中),然后再修改其值,否则界面很可能不会刷新。(译注:这一段不了解的朋友建议先学习下 js 中的基本类型和引用类型。) |