f8app代码学习的要点（2）-组件代码复用方法

f8app的学习是参考github的代码和f8app的中文讲解。
f8app
f8app中文指南

第二部分，看看关于rn的UI 代码复用问题。我觉得这个问题，刚开始学习可以不考虑，但是如果要深入学习，为了以后的开发越早接触越好。对于初学者学习的中心集中在RN概念的理解和redux的使用上。对于组件样式方面可以直接只用现成的跨平台组件库，目前看到比较好的有Elements和NativeBase.github一搜就知道。后面再讲讲两个组件库。

我们从全局的组件库开始目录是f8app/js/common
common文件夹里面有两个最顶端的工具文件，F8Color.js和F8StyleSheet.js. 主要看一下F8StyleSheet.js.

  /*js/common/F8StyleSheet.js */
'use strict';

import {StyleSheet, Platform} from 'react-native'; //引入Platform组件，根据操作系统选择样式

export function create(styles: Object): {[name: string]: number} {
  const platformStyles = {};
  Object.keys(styles).forEach((name) => {
    let {ios, android, ...style} = {...styles[name]};
    if (ios && Platform.OS === 'ios') {
      style = {...style, ...ios};//分别为不同系统展开不同样式
    }
    if (android && Platform.OS === 'android') {
      style = {...style, ...android}; //分别为不同系统展开不同样式
    }
    platformStyles[name] = style;
  });
  return StyleSheet.create(platformStyles);
}

F8StyleSheet.js 中的函数对rn的组件styleshee进行了包装，引入Platform组件获取ios或者android的信息，根据不同操作系统展开公用的样式和操作系统的不同样式。

 var StyleSheet = require('F8StyleSheet');//使用时就可以传入对象，就可以获取不同系统的特殊样式
 var styles = StyleSheet.create({
button: {
    borderColor: 'transparent', //公共样式ios,andorid都可以加载
    
    ios: {   //仅供ios加载，注意与android的区别
      height: HEIGHT,
      paddingHorizontal: 20,
      borderRadius: HEIGHT / 2,
      borderWidth: 1,
    },
    android: { //仅供android加载，注意与ios的区别
      paddingBottom: 6,
      paddingHorizontal: 10,
      borderBottomWidth: 3,
      marginRight: 10
  })

以后RN组件样式在逻辑相同的情况下都可以使用这个思想来加载。有人抱怨说web端好不容易把结构和样式分开了，RN又把样式和结构放到一起啦。这个看法只是错觉，放心，Fb的设计思想是很先进的。这段代码解决了跨操作系统的问题。其实结构和样式分离在js里是很容易实现的，由于样式也是对象，完全可以把它放到style.js文件中，然后export导入，import导出来操做。只不过在f8 react组件化的思想里，选择组件的颗粒度（尺寸，规模）刚刚好，把目的单一的结构和目的单一的样式放到一个文件里操作起来感觉整合度更高。