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

被 react native 折腾得晕晕的,有个问题想求教一下

  •  
  •   elone · 2017-07-06 00:44:53 +08:00 · 3075 次点击
    这是一个创建于 2696 天前的主题,其中的信息可能已经有所发展或是发生改变。

    这段时间在用 rn 开发一个答题 APP,遇到一个问题折腾我了好长时间了,不得不来求问。

    在答题 APP 中,类似于以前用驾照宝典,向左向右划动或者点击下一题 上一题 按钮可以进入下一题上一题 。

    因为是初次使用 RN 开发 APP,经验不足,我目前的做法是这样的:

    背景介绍:我使用 mobx 来管理 store

    一、自已的做法: 从服务器拉取特定数量的题目,保存到 store 中的列表,然后在列表中提取一个题目,在父 View 中进行渲染,此时在 View 中需要根据题目的类型(单选、多选、填空、判断)渲染不同的子组件。当点击下一题上一题时,则相应的在列表中提取题目数据,然后在父 View 中重新渲染对应类型的子组件。

    效果是实现了的,但不足之处是似乎不太顺畅,在切换题目时,总感觉有那么点卡,虽然在可以接受的范围内,但还是希望能够改进。

    二、比较想要的做法:使用类似于 android 的 viewpager 来实现 目前我找到三个不同的开源组件,分别是:

    1 ) https://github.com/race604/react-native-viewpager

    2 ) https://github.com/leecade/react-native-swiper

    3 ) https://github.com/zbtang/React-Native-ViewPager

    但是都有相应的问题存在 , 比如说 race604/react-native-viewpager, 我是根本没成功跑起来,没有正常渲染出组件,而且会有莫名其妙的问题,暂且略过不谈。

    再说 zbtang/React-Native-ViewPager,成功达到效果,page 之间切换很顺畅,但却有个问题,比如说,我初始阶段只是拉取了 10 条题目,当浏览到最后一题时,我需要再向服务器拉取更多的题目,

    但此时,我在拉取新的题目并且 push 在原列表之后,ViewPager 没有继续动态渲染新拉取的几个题目,我可以看到分页指示器多了几个分页,也可以切换过去相应的页面,但是页面是空的,没有相应的子组件 (不知道只是文字表示大家明不明白我在说什么),参考一下代码吧:

    _handlePageChange = (index) =>{
    
        const { questionStore } = this.props
    
        //当当前题目到达临界点时,再次向服务器请求更多的数据
        if ( index.position === (questionStore.questions.length - 1)){
          this.fetchQuestions()
        }
      }
      
      render(){
      	<IndicatorViewPager
                        style={{height:300}}
                        indicator={this._renderDotIndicator()}
                        onPageSelected={ this._handlePageChange }
                    >
                      {questions.map((item) => {     // questions 来自于 mobx store
                          return (<View style={styles.slide1} key={item.id}>
                                <Text style={{fontWeight: 'bold'}}> {item.subject} </Text>
                                
                          </View>)
                      })}
                    </IndicatorViewPager>
      }
    

    最后说一下最热门的 leecade/react-native-swiper,很好很顺畅,功能也满足我的需求,但却遇到一个目前无解的 bug ,可以参考这个 issue:https://github.com/leecade/react-native-swiper/issues/233,我也遇到同样的问题,基于此,淘汰掉。

    所以最后我想问,使用 rn 来实现 上一题 下一题,有什么优雅高效的方案吗?

    顺便吐槽一下隔壁 react china 社区,人气严重不足。

    4 条回复    2017-07-13 00:49:13 +08:00
    maxxxxx
        1
    maxxxxx  
       2017-07-06 08:26:13 +08:00 via iPhone
    没有太理解,直接用 native 封装一个组件看起来没什么坑啊。还能实现复用。
    airycanon
        2
    airycanon  
       2017-07-06 09:04:31 +08:00
    render 时看不出 questions 是怎么来的,最好发个 gist,把 store 部分的代码也放上去看看。
    kearone
        3
    kearone  
       2017-07-06 09:50:17 +08:00   ❤️ 1
    RN 我有快一年没碰了,我只能用我以前写的经验(勿喷)回答你:
    1、减少请求次数,可以选择缓存数据到 local
    2、state 管理之类的如非必要也可以不上
    3、RN 打包后和不打包相差很大,也许你的应用打包后性能会好很多
    4、记得好像有个什么库可以帮你删除 log 信息,(因为程序上线后不需要打印信息,这一定程度可以提高性能)
    5、你切换的题目时候,试试替换当前场景,而不是一直入栈。
    看了 issue,最后问题在于一页需要滑动的太多而导致性能不足,所以试试分组答题?比如 50 道题目,分 5 组
    elone
        4
    elone  
    OP
       2017-07-13 00:49:13 +08:00
    @kearone #3 感谢回复。我试试打包看看效果有没有有所提升 。
    关于   ·   帮助文档   ·   博客   ·   API   ·   FAQ   ·   实用小工具   ·   3024 人在线   最高记录 6679   ·     Select Language
    创意工作者们的社区
    World is powered by solitude
    VERSION: 3.9.8.5 · 23ms · UTC 10:58 · PVG 18:58 · LAX 02:58 · JFK 05:58
    Developed with CodeLauncher
    ♥ Do have faith in what you're doing.