V2EX = way to explore
V2EX 是一个关于分享和探索的地方
现在注册
已注册用户请  登录
boyxy120
V2EX  ›  React

RN 遇到的一点问题

  •  
  •   boyxy120 · 2017-09-18 10:59:13 +08:00 · 2099 次点击
    这是一个创建于 2653 天前的主题,其中的信息可能已经有所发展或是发生改变。

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