一起来学习f8app(3)--ReactNative的组件

从F8Button开始

在客户端代码的common文件夹下,

image.png

有三个跟Button相关的代码.

F8Button.js
F8Colors.js
F8Text.js

F8Colors

这个文件中定义了应用中常用的几种类型的颜色.

首先是一个颜色表, 这个颜色表是给取色函数用的

'use strict';

const LOCATION_COLORS = {
  'HERBST': '#00E3AD',
  'HERBST A': '#00E3AD',
  'HERBST B': '#00E3AD',
  'HACKER X': '#4D99EF',
  'HACKER Y': '#CF72B1',
  'COWELL': '#6A6AD5',
  'COWELL C': '#6A6AD5',
  'FOOD TENT': '#FFCD3B',
};

两个取色用函数

function colorForLocation(location: ?string): string {
  if (!location) {
    return 'black';
  }

  var color = LOCATION_COLORS[location.toUpperCase()];
  if (!color) {
    console.warn(`Location '${location}' has no color`);
    color = 'black';
  }
  return color;
}

function colorForTopic(count: number, index: number): string {
  const hue = Math.round(360 * index / (count + 1));
  return `hsl(${hue}, 74%, 65%)`;
}

最后才是在应用中使用的颜色, 颜色都以使用的场景来命名.

module.exports = {
  actionText: '#3FB4CF',
  inactiveText: '#9B9B9B',
  darkText: '#032250',
  lightText: '#7F91A7',
  cellBorder: '#EEEEEE',
  darkBackground: '#183E63',
  colorForLocation,
  colorForTopic,
};

F8Text

F8Text.js中定义了F8App中常用的三种Text样式

• 普通文本
• H1标题
• P段落

以下代码导出了这三种样式的组件:

'use strict';

import React from 'react';
import ReactNative, {StyleSheet, Dimensions} from 'react-native';
import F8Colors from 'F8Colors';

export function Text({style, ...props}: Object): ReactElement {
  return ;
}

export function Heading1({style, ...props}: Object): ReactElement {
  return ;
}

export function Paragraph({style, ...props}: Object): ReactElement {
  return ;
}

具体的大小, 风格定义在了这里:

const scale = Dimensions.get('window').width / 375;

function normalize(size: number): number {
  return Math.round(scale * size);
}

const styles = StyleSheet.create({
  font: {
    fontFamily: require('../env').fontFamily,
  },
  h1: {
    fontSize: normalize(24),
    lineHeight: normalize(27),
    color: F8Colors.darkText,
    fontWeight: 'bold',
    letterSpacing: -1,
  },
  p: {
    fontSize: normalize(15),
    lineHeight: normalize(23),
    color: F8Colors.lightText,
  },
});