学习博客园开源代码笔记（startup页面）

最新推荐文章于 2024-05-21 09:43:47 发布

老孟Flutter

最新推荐文章于 2024-05-21 09:43:47 发布

阅读量679

点赞数

分类专栏： react native 学习之旅文章标签：开源代码 react-native 博客园

本文链接：https://blog.csdn.net/mengks1987/article/details/74202508

版权

react native 学习之旅专栏收录该内容

44 篇文章 8 订阅

订阅专栏

startup页面效果图：

这里写图片描述

页面的基本逻辑：logo动画->是否登录已经登录跳转到home页面，未登录弹出登录modal。

看下render方法：

render() {
    return (
      <View style={ [ ComponentStyles.container, CommonStyles.flexItemsCenter, CommonStyles.flexItemsMiddle, styles.container ] }>
          { this.renderContent() }
          { this.renderModal() }
          { this.renderModalBackdrop() }
      </View>
    );
  }

这里又render了3个组件：第一个 this.renderContent()

renderContent(){
    return (
        <Animatable.View 
          onAnimationEnd = {()=>this.onPageContentShow() }
          animation="fadeInDown">
            <Logo />
        </Animatable.View>
    )
  }

这是一个过度动画，动画结束后调用this.onPageContentShow()方法，这个方法就是判断当前是否登录，已经登录跳转到home页面，未登录弹出登录modal。

this.renderModalBackdrop() 这个渲染一个全屏的透明度为0.8的黑色背景，目的是为了使modal看上去像弹出框一样。
点击取消按钮：

  onCancelPress(){
    this.timer && TimerMixin.clearTimeout(this.timer);
    BackAndroid.exitApp();
  }

android上会退出app，ios无反应，我觉得可以统一一下。

我个人觉得有2个地方可以优化：
1、this.renderModalBackdrop() 这个渲染可以放到Modal的最外层View上。
2、logo动画结束后才会判断是否登录，而且会请求服务器刷新token，这里涉及到http请求，如果网络不好的情况下可能会出现较长时间的卡顿（看上去）。解决办法是可以再启动的时候就验证是否登录，当然这没有从根本上解决，但大部分情况下还是比较好的，最好的解决办法就是如果在过渡时间段内没有得到http的返回结果，就设计一个正在登录的UI，让用户知道正在登录。
3、最好把整个app的涉及到的文案统一写在一个配置文件里。方便后面的管理、维护，也为国际化做准备。
4、BackAndroid在最新版本已经废弃，使用BackHandler代替

疑惑的地方：
1、app中使用了TimerMixin的很多函数，但系统都有这些函数，不知道是不是早期没有这些函数，还是这个库效率更好？

react-native-animatable 是一个很不错的动画库，项目中用到的时候可以看看，不过还是建议自己动手写写，实在不行了在用第三方的，一个是为了更好的熟悉react-native，另一个是react-native版本更新相当快，一些第三方的库可能不支持最新的版本。