boyxy120
V2EX  ›  React

RN 遇到的一点问题

  •  
  •   boyxy120 · Sep 18, 2017 · 2905 views
  •   You need to sign in to view this topic
    This topic created in 3232 days ago, the information mentioned may be changed or developed.

    就是第一次加载时能加载出相应的数据,在后来加载更多的时候,状态机里的 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>
            );
        }
    
    Daemon1993
        1
    Daemon1993  
       Sep 18, 2017   ❤️ 1
    在接受新数据的时候 setState({}) 来改变数组
    我前面用 redux 是在 componentWillReceiveProps 页面接受新数据
    建议看看 RN 组件的生命周期
    https://www.race604.com/react-native-component-lifecycle/
    boyxy120
        2
    boyxy120  
    OP
       Sep 18, 2017
    @Daemon1993
    似乎是 SectionList 这个组件的坑,不是生命周期的问题
    本组件继承自 PureComponent 而非通常的 Component,这意味着如果其 props 在浅比较中是相等的,则不会重新渲染。所以请先检查你的 renderItem 函数所依赖的 props 数据(包括 data 属性以及可能用到的父组件的 state ),如果是一个引用类型( Object 或者数组都是引用类型),则需要先修改其引用地址(比如先复制到一个新的 Object 或者数组中),然后再修改其值,否则界面很可能不会刷新。(译注:这一段不了解的朋友建议先学习下 js 中的基本类型和引用类型。)
    About   ·   Help   ·   Advertise   ·   Blog   ·   API   ·   FAQ   ·   Solana   ·   2780 Online   Highest 6679   ·     Select Language
    创意工作者们的社区
    World is powered by solitude
    VERSION: 3.9.8.5 · 35ms · UTC 12:58 · PVG 20:58 · LAX 05:58 · JFK 08:58
    ♥ Do have faith in what you're doing.