被 react native 折腾得晕晕的,有个问题想求教一下 - V2EX
V2EX = way to explore
V2EX 是一个关于分享和探索的地方
现在注册
已注册用户请  登录
elone
V2EX    React

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

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

    这段时间在用 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     Solana     2709 人在线   最高记录 6679       Select Language
    创意工作者们的社区
    World is powered by solitude
    VERSION: 3.9.8.5 25ms UTC 09:01 PVG 17:01 LAX 02:01 JFK 05:01
    Do have faith in what you're doing.
    ubao snddm index pchome yahoo rakuten mypaper meadowduck bidyahoo youbao zxmzxm asda bnvcg cvbfg dfscv mmhjk xxddc yybgb zznbn ccubao uaitu acv GXCV ET GDG YH FG BCVB FJFH CBRE CBC GDG ET54 WRWR RWER WREW WRWER RWER SDG EW SF DSFSF fbbs ubao fhd dfg ewr dg df ewwr ewwr et ruyut utut dfg fgd gdfgt etg dfgt dfgd ert4 gd fgg wr 235 wer3 we vsdf sdf gdf ert xcv sdf rwer hfd dfg cvb rwf afb dfh jgh bmn lgh rty gfds cxv xcv xcs vdas fdf fgd cv sdf tert sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf shasha9178 shasha9178 shasha9178 shasha9178 shasha9178 liflif2 liflif2 liflif2 liflif2 liflif2 liblib3 liblib3 liblib3 liblib3 liblib3 zhazha444 zhazha444 zhazha444 zhazha444 zhazha444 dende5 dende denden denden2 denden21 fenfen9 fenf619 fen619 fenfe9 fe619 sdf sdf sdf sdf sdf zhazh90 zhazh0 zhaa50 zha90 zh590 zho zhoz zhozh zhozho zhozho2 lislis lls95 lili95 lils5 liss9 sdf0ty987 sdft876 sdft9876 sdf09876 sd0t9876 sdf0ty98 sdf0976 sdf0ty986 sdf0ty96 sdf0t76 sdf0876 df0ty98 sf0t876 sd0ty76 sdy76 sdf76 sdf0t76 sdf0ty9 sdf0ty98 sdf0ty987 sdf0ty98 sdf6676 sdf876 sd876 sd876 sdf6 sdf6 sdf9876 sdf0t sdf06 sdf0ty9776 sdf0ty9776 sdf0ty76 sdf8876 sdf0t sd6 sdf06 s688876 sd688 sdf86