RN 遇到的一点问题

2017-09-18 10:59:13 +08:00
 boyxy120

就是第一次加载时能加载出相应的数据,在后来加载更多的时候,状态机里的 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>
        );
    }
2081 次点击
所在节点    React
2 条回复
Daemon1993
2017-09-18 11:47:35 +08:00
在接受新数据的时候 setState({}) 来改变数组
我前面用 redux 是在 componentWillReceiveProps 页面接受新数据
建议看看 RN 组件的生命周期
https://www.race604.com/react-native-component-lifecycle/
boyxy120
2017-09-18 12:19:45 +08:00
@Daemon1993
似乎是 SectionList 这个组件的坑,不是生命周期的问题
本组件继承自 PureComponent 而非通常的 Component,这意味着如果其 props 在浅比较中是相等的,则不会重新渲染。所以请先检查你的 renderItem 函数所依赖的 props 数据(包括 data 属性以及可能用到的父组件的 state ),如果是一个引用类型( Object 或者数组都是引用类型),则需要先修改其引用地址(比如先复制到一个新的 Object 或者数组中),然后再修改其值,否则界面很可能不会刷新。(译注:这一段不了解的朋友建议先学习下 js 中的基本类型和引用类型。)

这是一个专为移动设备优化的页面(即为了让你能够在 Google 搜索结果里秒开这个页面),如果你希望参与 V2EX 社区的讨论,你可以继续到 V2EX 上打开本讨论主题的完整版本。

https://www.v2ex.com/t/391554

V2EX 是创意工作者们的社区,是一个分享自己正在做的有趣事物、交流想法,可以遇见新朋友甚至新机会的地方。

V2EX is a community of developers, designers and creative people.

© 2021 V2EX