项目准备

• 代码仓库 使用bitbucket 提供的免费git仓库
• 使用sourcetree作为git客户端工具
• sublime3 作为开发工具，一些插件比如，package-control Babel react-native-snippets colorPicker side-bar ...
• genymotion 模拟器作为运行虚拟机4.4.4
• 华为 mate7 真机测试 android 版本6.0
• 原型设计 使用 墨刀

项目计划

因为时间有限，所以 直接按照功能模块进行开发，一个功能先设计原型图，之后再进行功能实现。

现在，我需要一个 进场动画 ，通过awesome-react-native 不难找出几款适用的插件（感觉好low ，需要别人提供组件，不过，功能实现第一位，之后再了解组件实现也是能学到东西）。通过对比决定使用 react-native-swiper 作为进场图片轮播的实现。

开始

• 首先，初始化项目之后，需要制定一定的项目结构，因为经验不足，这里参考，官方 f8作为项目结构指导, 实现如下项目结构
  

  Paste_Image.png
  • store ,作为redux 的store
  • splash ，作为进场动画
  • actions ，作为 redux 的action
  • reducers, 作为redux的reducer
  • common ,作为 公共组建

根据这些要求，初始化项目构成，修改代码，增加redux支持
，redux的配置可以参考 react-redux 总结

• 那么开始编写进场动画，整体的规划是四张图片轮播使用swiper组件，关于图片如何展示？react-native 提供了组件<Image> 用来展示图片，使用规则为<Image source={require('./my-icon.png')} />

实现如下编码

Paste_Image.png

效果如下：

splash1.gif

虽然有几张图片没有显示完全，但是效果还不错，不过最后两张需要调整下图片的显示，并且我不希望第四章滑动之后又回到第一张，所以，进行调整样式。

splash2.gif

这里出现了一个问题，因为我的手机宽度能显示360dip，所以，我感觉他按照图片像素进行显示了，没有改变图片，那么我设置了每个image的宽高，这样这个组件在计算时候就不会导致图片异常，需要看下这个组件如何实现的。先上代码

Paste_Image.png

轮播图实现了，最后一个图片上面需要一个按钮，点击之后跳转到首页

splash3.gif