自定义的,基于组件的样式的前途

JavaScript 中的 CSS:基于组件的样式的以后

2017/12/03 · CSS ·
体制组件

本文由 伯乐在线 –
dimple11
翻译,刘唱
校稿。未经许可,禁止转发!
英文出处:Jonathan Z.
White。欢迎参加翻译组。

 

亚洲必赢官网 1

 

 

 

 

 

 

 

 

 

咱俩通过运用内联式 CSS 样式,能够赢得
Javascript 中保有编制程序协理,它的好处就像 CSS
预处理器(变量、混入和函数)一样,而且也能缓解 CSS
中的很多难题,比如全局命名空间和体裁争执。

为了深切切磋 Javascript 中写 CSS
化解的难题,能够看那个出名的言传身教:ReactJS中引入CSS。关于 Aphrodite 上的性质立异范例,你能够在Khan
Academy: Aphrodite 上查到内联式 CSS
代码,假若想学学越多Javascript 中 CSS 最佳实践的有关知识,能够查阅 Airbnb
的体裁指南。

其余,我们接纳内联式 Javascript
样式来树立组件,处理自个儿前一篇小说中牵线的一些企划基本原理:在你能明白设计后面,必须先了然设计的基本原理。

2个启发式的事例

我们从三个简练的例证入手:创立和统一筹划三个按钮。

一般说来,组件 Button 和其连带的体制
ButtonStyles
会被放入相同的公文,那是因为它们处理的是同个难点:视图。可是以这一个事例来说,作者是因为八种考虑要将代码分开,使代码更易被精晓。

此刻是按钮组件:

<span style=”color: #000000″>… function Button(props) { return
( <input type=”button” className={css(styles.button)}
value={props.text} /> ); }</span>

1
2
3
4
5
6
7
8
9
10
<span style="color: #000000">…
function Button(props) {
  return (
    <input
      type="button"
      className={css(styles.button)}
      value={props.text}
    />
  );
}</span>

这里没什么尤其的——正是一个无状态 React
组件。Aphrodite 发挥功能的地点是在 className 属性那里。函数 css
的效应是引入了三个styles 对象,并将其更换为 css。styles 对象是经过
Aphrodite 的 StyleSheet.create({ … }) 语句所生成,你能够透过 Aphrodite
playground 查看 StyleSheet.create({ …
}) 的输出结果。

那时候是按钮的样式表:

CSS

<span style=”color: #000000″>… const gradient =
‘linear-gradient(45deg, #FE6B8B 30%, #FF8E53 90%)’; const styles =
StyleSheet.create({ button: { background: gradient, borderRadius: ‘3px’,
border: 0, color: ‘white’, height: ’48px’, textTransform: ‘uppercase’,
padding: ‘0 25px’, boxShadow: ‘0 3px 5px 2px rgba(255, 105, 135, .30)’,
}, });</span>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
<span style="color: #000000">…
const gradient = ‘linear-gradient(45deg, #FE6B8B 30%, #FF8E53 90%)’;
const styles = StyleSheet.create({
  button: {
    background: gradient,
    borderRadius: ‘3px’,
    border: 0,
    color: ‘white’,
    height: ’48px’,
    textTransform: ‘uppercase’,
    padding: ‘0 25px’,
    boxShadow: ‘0 3px 5px 2px rgba(255, 105, 135, .30)’,
  },
});</span>

 

Aphrodite 的功利之一是搬迁不难直接,而且学习曲线低缓。像
border-radius
那种性质改为了borderRadius,值变成了字符串。伪类选取器、媒体询问和字体定义都以可实现的,其余,会自行抬高浏览器引擎前缀。

以下是结果:

亚洲必赢官网 2

 

 

 

 

 

 

 

 

铭记那么些事例,我们来探望怎么着使用 Aphrodite
来树立1个主干的可视化设计系统,大家珍视于以下基本设计法则:排版和距离。

基本法则1——排版

我们从排版入手,它是布置的根本基础。第二步是概念排版常量,与
Sass 和 Less 不一样,Aphrodite 中常量能够置身 Javascript 或 JSON
文件中。

概念排版常量

在创设常量时,给变量起名要语义化。比如说,不要给内部的字号起名
h2,而应起像 displayLarge
这种能够描述其功效的名字。类似的,设置字体粗细时,不要给当中的粗细值起名
600,而应起像半粗体这样的名字,方便描述其职能。

CSS

<span style=”color: #000000″>export const fontSize = { // heading
displayLarge: ’32px’, displayMedium: ’26px’, displaySmall: ’20px’,
heading: ’18px’, subheading: ’16px’, // body body: ’17px’, caption:
’15px’, }; export const fontWeight = { bold: 700, semibold: 600, normal:
400, light: 200, }; export const tagMapping = { h1: ‘displayLarge’, h2:
‘displayMedium’, h3: ‘displaySmall’, h4: ‘heading’, h5: ‘subheading’, };
export const lineHeight = { // heading displayLarge: ’48px’,
displayMedium: ’48px’, displaySmall: ’24px’, heading: ’24px’,
subheading: ’24px’, // body body: ’24px’, caption: ’24px’,
};</span>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
<span style="color: #000000">export const fontSize = {
  // heading
  displayLarge: ’32px’,
  displayMedium: ’26px’,
  displaySmall: ’20px’,
  heading: ’18px’,
  subheading: ’16px’,
 
  // body
  body: ’17px’,
  caption: ’15px’,
};
 
export const fontWeight = {
  bold: 700,
  semibold: 600,
  normal: 400,
  light: 200,
};
 
export const tagMapping = {
  h1: ‘displayLarge’,
  h2: ‘displayMedium’,
  h3: ‘displaySmall’,
  h4: ‘heading’,
  h5: ‘subheading’,
};
 
export const lineHeight = {
  // heading
  displayLarge: ’48px’,
  displayMedium: ’48px’,
  displaySmall: ’24px’,
  heading: ’24px’,
  subheading: ’24px’,
 
  // body
  body: ’24px’,
  caption: ’24px’,
};</span>

对诸如字号和行高等变量正确赋值十分首要,因为它们会一向影响设计的垂直规律(vertical
ryth),垂直规律能支持达成要素之间的区间统一。

要询问越来越多的垂直规律,你可以翻阅这篇小说:干什么垂直规律是一种重点的排版习惯?

亚洲必赢官网 3

用总计器明确行高

想让行高和字号取值正确,背后大有知识。大家得以行使算数比率来发生一多元潜在尺寸以作备选。几周前,作者写了一篇详述方法论的小说:排版能够做到或损毁你的统一筹划:三个门类采纳的进度。你能够动用Modular
Scale 来决定字号,使用垂直规律总括器来决定行高。

概念一个标题组件

概念了排版常量之后,下一步是开创多少个零件使用其值。其一组件的对象是在代码库中强化标题设计和达成的一致性。

<span style=”color: #000000″>import React, { PropTypes } from
‘react’; import { StyleSheet, css } from ‘aphrodite/no-important’;
import { tagMapping, fontSize, fontWeight, lineHeight } from
‘../styles/base/typography’; function Heading(props) { const { children,
tag: Tag } = props; return <Tag
className={css(styles[tagMapping[Tag]])}>{children}</Tag>;
} export default Heading; export const styles = StyleSheet.create({
displayLarge: { fontSize: fontSize.displayLarge, fontWeight:
fontWeight.bold, lineHeight: lineHeight.displayLarge, }, displayMedium:
{ fontSize: fontSize.displayMedium, fontWeight: fontWeight.normal,
lineHeight: lineHeight.displayLarge, }, displaySmall: { fontSize:
fontSize.displaySmall, fontWeight: fontWeight.bold, lineHeight:
lineHeight.displaySmall, }, heading: { fontSize: fontSize.heading,
fontWeight: fontWeight.bold, lineHeight: lineHeight.heading, },
subheading: { fontSize: fontSize.subheading, fontWeight:
fontWeight.bold, lineHeight: lineHeight.subheading, }, });</span>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
<span style="color: #000000">import React, { PropTypes } from ‘react’;
import { StyleSheet, css } from ‘aphrodite/no-important’;
import { tagMapping, fontSize, fontWeight, lineHeight } from ‘../styles/base/typography’;
 
function Heading(props) {
  const { children, tag: Tag } = props;
  return <Tag className={css(styles[tagMapping[Tag]])}>{children}</Tag>;
}
 
export default Heading;
 
export const styles = StyleSheet.create({
  displayLarge: {
    fontSize: fontSize.displayLarge,
    fontWeight: fontWeight.bold,
    lineHeight: lineHeight.displayLarge,
  },
  displayMedium: {
    fontSize: fontSize.displayMedium,
    fontWeight: fontWeight.normal,
    lineHeight: lineHeight.displayLarge,
  },
  displaySmall: {
    fontSize: fontSize.displaySmall,
    fontWeight: fontWeight.bold,
    lineHeight: lineHeight.displaySmall,
  },
  heading: {
    fontSize: fontSize.heading,
    fontWeight: fontWeight.bold,
    lineHeight: lineHeight.heading,
  },
  subheading: {
    fontSize: fontSize.subheading,
    fontWeight: fontWeight.bold,
    lineHeight: lineHeight.subheading,
  },
});</span>

 

Heading
是无状态的函数式组件,它引入三个标签作为品质,并回到该标签相应的体裁。因为我们早前已在常量文件中定义了标签映射,所以那样是合理的。

<span style=”color: #000000″>… export const tagMapping = { h1:
‘displayLarge’, h2: ‘displayMedium’, h3: ‘displaySmall’, h4: ‘heading’,
h5: ‘subheading’, };</span>

1
2
3
4
5
6
7
8
<span style="color: #000000">…
export const tagMapping = {
  h1: ‘displayLarge’,
  h2: ‘displayMedium’,
  h3: ‘displaySmall’,
  h4: ‘heading’,
  h5: ‘subheading’,
};</span>

大家在组件文件的底层定义styles对象,就在那里会用到排版常量。

<span style=”color: #000000″>export const styles =
StyleSheet.create({ displayLarge: { fontSize: fontSize.displayLarge,
fontWeight: fontWeight.bold, lineHeight: lineHeight.displayLarge, }, …
});</span>

1
2
3
4
5
6
7
8
9
<span style="color: #000000">export const styles = StyleSheet.create({
  displayLarge: {
    fontSize: fontSize.displayLarge,
    fontWeight: fontWeight.bold,
    lineHeight: lineHeight.displayLarge,
  },
  
  …
});</span>

那正是标题组件的运用格局:

<span style=”color: #000000″>function Parent() { return (
<Heading tag=”h2″>Hello World</Heading> ); }</span>

1
2
3
4
5
<span style="color: #000000">function Parent() {
  return (
    <Heading tag="h2">Hello World</Heading>
  );
}</span>

利用那种方法,能够减少设计系统中现身的不测变动。通过消除对全局样式的须求,以及对代码库标题的准化,可以使大家幸免各样区别字号的麻烦。其余,我们用来确立标题组件的章程也可用于在代码主体建立文本组件。

基本法则2——间隔

间隔能够同时控制规划中的垂直和品位规律,那使得间隔对于树立一个可视化设计系统主要。和排版部分同样,处理间隔的首先步正是概念间隔常量。

概念间隔常量

概念成分间距离常量时,大家得以选取一种算数方法。通过运用
spacingFactor
常量能够生出一多元基于三个公因数的尺寸,这种格局能够保障成分间的区间具有逻辑性和一致性。

<span style=”color: #000000″>const spacingFactor = 8; export
const spacing = { space0: `${spacingFactor / 2}px`, // 4 space1:
`${spacingFactor}px`, // 8 space2: `${spacingFactor * 2}px`, // 16
space3: `${spacingFactor * 3}px`, // 24 space4: `${spacingFactor *
4}px`, // 32 space5: `${spacingFactor * 5}px`, // 40 space6:
`${spacingFactor * 6}px`, // 48 space8: `${spacingFactor * 8}px`,
// 64 space9: `${spacingFactor * 9}px`, // 72 space13:
`${spacingFactor * 13}px`, // 104 };</span>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
<span style="color: #000000">const spacingFactor = 8;
export const spacing = {
  space0: `${spacingFactor / 2}px`,  // 4
  space1: `${spacingFactor}px`,      // 8
  space2: `${spacingFactor * 2}px`,  // 16
  space3: `${spacingFactor * 3}px`,  // 24
  space4: `${spacingFactor * 4}px`,  // 32
  space5: `${spacingFactor * 5}px`,  // 40
  space6: `${spacingFactor * 6}px`,  // 48
 
  space8: `${spacingFactor * 8}px`,  // 64
  space9: `${spacingFactor * 9}px`,  // 72
  space13: `${spacingFactor * 13}px`, // 104
};</span>

地点的事例用了1个从一到十三的线性刻度,但是用分裂的刻度和比重做试验。设计个中因为用途、受众以及目的设备的两样而供给分歧的刻度。以下为例,那是值为
8 的 spacingFactor 用黄金比例算出来的前七个长度

<span style=”color: #000000″>Golden Ratio (1:1.618) 8.0 x (1.618
^ 0) = 8.000 8.0 x (1.618 ^ 1) = 12.94 8.0 x (1.618 ^ 2) = 20.94 8.0 x
(1.618 ^ 3) = 33.89 8.0 x (1.618 ^ 4) = 54.82 8.0 x (1.618 ^ 5) =
88.71</span>

1
2
3
4
5
6
7
<span style="color: #000000">Golden Ratio (1:1.618)
8.0 x (1.618 ^ 0) = 8.000
8.0 x (1.618 ^ 1) = 12.94
8.0 x (1.618 ^ 2) = 20.94
8.0 x (1.618 ^ 3) = 33.89
8.0 x (1.618 ^ 4) = 54.82
8.0 x (1.618 ^ 5) = 88.71</span>

那就是距离刻度在代码中显得的规范,笔者加了叁个接济函数,把总括结果处理成最相仿的平头像素。

<span style=”color: #000000″>const spacingFactor = 8; export
const spacing = { space0: `${computeGoldenRatio(spacingFactor, 0)}px`,
// 8 space1: `${computeGoldenRatio(spacingFactor, 1)}px`, // 13
space2: `${computeGoldenRatio(spacingFactor, 2)}px`, // 21 space3:
`${computeGoldenRatio(spacingFactor, 3)}px`, // 34 space4:
`${computeGoldenRatio(spacingFactor, 4)}px`, // 55 space5:
`${computeGoldenRatio(spacingFactor, 5)}px`, // 89 }; function
computeGoldenRatio(spacingFactor, exp) { return Math.round(spacingFactor
* Math.pow(1.618, exp)); }</span>

1
2
3
4
5
6
7
8
9
10
11
12
13
<span style="color: #000000">const spacingFactor = 8;
export const spacing = {
  space0: `${computeGoldenRatio(spacingFactor, 0)}px`,  // 8
  space1: `${computeGoldenRatio(spacingFactor, 1)}px`,  // 13
  space2: `${computeGoldenRatio(spacingFactor, 2)}px`,  // 21
  space3: `${computeGoldenRatio(spacingFactor, 3)}px`,  // 34
  space4: `${computeGoldenRatio(spacingFactor, 4)}px`,  // 55
  space5: `${computeGoldenRatio(spacingFactor, 5)}px`,  // 89
};
 
function computeGoldenRatio(spacingFactor, exp) {
  return Math.round(spacingFactor * Math.pow(1.618, exp));
}</span>

概念了距离常量之后,我们就足以用它给规划中的成分加外边距。一种格局就是在组件中引入间隔常量并运用它们。

诸如,大家在 Button 组件中参加marginBottom。

<span style=”color: #000000″>import { spacing } from
‘../styles/base/spacing’; … const styles = StyleSheet.create({ button:
{ marginBottom: spacing.space4, // adding margin using spacing constant
… }, });</span>

1
2
3
4
5
6
7
8
9
10
<span style="color: #000000">import { spacing } from ‘../styles/base/spacing’;
 
 
const styles = StyleSheet.create({
  button: {
    marginBottom: spacing.space4, // adding margin using spacing constant
    …
  },
});</span>

那在大多数意况下都管用,不过一旦大家想根据按钮放置的职务去改变它的
marginBottom 属性值,该如何是好吧?

一种完毕种种外乡距的格局是从父组件覆盖外边距样式,此外一种格局是创办八个Spacing 组件来决定成分的垂直外边距。

<span style=”color: #000000″>import React, { PropTypes } from
‘react’; import { spacing } from ‘../../base/spacing’; function
getSpacingSize(size) { return `space${size}`; } function
Spacing(props) { return ( <div style={{ marginBottom:
spacing[getSpacingSize(props.size)] }}> {props.children}
</div> ); } export default Spacing;</span>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
<span style="color: #000000">import React, { PropTypes } from ‘react’;
import { spacing } from ‘../../base/spacing’;
 
function getSpacingSize(size) {
  return `space${size}`;
}
 
function Spacing(props) {
  return (
    <div style={{ marginBottom: spacing[getSpacingSize(props.size)] }}>
      {props.children}
    </div>
  );
}
 
export default Spacing;</span>

经过那种格局,大家得以将安装异地距的天职从子组件中抽离出来,转而放入父组件中进行。这样的话,子组件布局就不得而知了,不供给知道子组件自己与其它因素之间的地点关系。

这很有用,因为一些像按钮、输入和卡片之类的机件或许须要多样各地距。比如说,2个报表中的按钮只怕比一个导航栏中的按钮需求更大的异乡距。特别告诫一点,假如3个零部件的异地距总是一样的,那么在组件内部处理理外边距会更合理。

并且你也大概已经注意到了例子中仅用了
marginBottom,那是因为在二个主旋律上定义全部的垂直外边距,可以幸免外边距碰撞,并且帮你及时跟进驾驭规划的垂直规律。你能够在哈利罗Bert的稿子《单向外省距证明》中来看越多这方面包车型大巴始末。

说到底一点,你也足以将概念的距离常量用作内边距。

<span style=”color: #000000″>import React, { PropTypes } from
‘react’; import { StyleSheet, css } from ‘aphrodite/no-important’;
import { spacing } from ‘../../styles/base/spacing’; function
Card(props) { return ( <div className={css(styles.card)}>
{props.children} </div> ); } export default Card; export const
styles = StyleSheet.create({ card: { padding: spacing.space4}, // using
spacing constants as padding background: ‘rgba(255, 255, 255, 1.0)’,
boxShadow: ‘0 3px 17px 2px rgba(0, 0, 0, .05)’, borderRadius: ‘3px’, },
});</span>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
<span style="color: #000000">import React, { PropTypes } from ‘react’;
import { StyleSheet, css } from ‘aphrodite/no-important’;
import { spacing } from ‘../../styles/base/spacing’;
 
function Card(props) {
  return (
    <div className={css(styles.card)}>
      {props.children}
    </div>
  );
}
 
export default Card;
 
export const styles = StyleSheet.create({
  card: {
    padding: spacing.space4}, // using spacing constants as padding
    
    background: ‘rgba(255, 255, 255, 1.0)’,
    boxShadow: ‘0 3px 17px 2px rgba(0, 0, 0, .05)’,
    borderRadius: ‘3px’,
  },
});</span>

由此对内外边距使用同样的距离常量,你便得以使和谐的设计更具备视觉上的一致性。

那是结果大概出现的指南:

亚洲必赢官网 4

 

 

 

 

 

 

 

既是您对 Javascript 中的 CSS
有早晚控制,那就去试试,尝试将内联式 Javascript
样式纳入你的下一个门类。假诺能够在单纯的条件下处理全部的体制和视图,作者想你会对此格外感谢。

针对 CSS 和
Javascript,有哪些让您感觉到震撼的新进展吗?作者个人因为 async/await
而深感欢愉不已,你能够留言或在 推特 上给自家发 tweet。

你能够透过 Medium
找到小编,作者每一周都会发文章,只怕关心本身的
Instagram,我总在地方对规划、前端开发以及虚拟现实东拉西扯。

附记:假若您喜爱这篇小说,那么点击 💚 并享受给爱人会很有含义。

1 赞 1 收藏
评论

Highcharts翻译体系之十九:曲线图例子(1)
 

/**

本 segment 是依照 DefaultTabBar 改写而成 ,
由于动画效果会遮掩里面包车型客车文字,所以把 动画去掉了。

有关我:dimple11

亚洲必赢官网 5

简介还没赶趟写 :)
个人主页 ·
小编的篇章 ·
15

亚洲必赢官网 6

代码:

  • Sample React Native App
  • https://github.com/facebook/react-native
  • @flow
    */

亚洲必赢官网 7

[html]
<!DOCTYPE HTML PUBLIC “-//W3C//DTD HTML 4.0 Transitional//EN”> 
<html> 
<head> 
    <title>重量曲线图</title> 
    <script type=”text/javascript”
src=”Lib/Scripts/jquery-1.7.2.min.js”></script> 
    <script type=”text/javascript”> 
        $(function () { 
            var splinechart; 
            $(document).ready(function () { 
                splinechart = new Highcharts.Chart({ 
                    chart: { 
                        renderTo: ‘splineContainer’, 
                        type: ‘spline’, 
                        margin: [25, 30, 70, 50] 
                    }, 
                    title: { 
                        text: ‘体重’, 
                        x: 50, 
自定义的,基于组件的样式的前途。                        y: 10, 
                        style: { 
                            display: ‘none’ 
                        } 
                    }, 
                    color: [ 
                    ‘#006ebe’ 
                    ], 
                    subtitle: { 
                        style: { 
                            display: ‘none’ 
                        } 
                    }, 
                    xAxis: { 
                        lineWidth: 1, 
                        lineColor: ‘#dfe7ef’, 
                        gridLineWidth: 0, 
                        lineColor: ‘#000000’, 
                        startOnTick: true, 
                        tickPixelInterval: 110, 
                        type: ‘datetime’, 
                        labels: { 
                            rotation: -45, 
                            y: 40, 
                            style: { 
                                color: ‘#000000’, 
                                fontSize: ‘8px’, 
                                fontWeight: ‘normal’ 
 
                            } 
                        }, 
                        tickColor: ‘#000000’, 
                        tickLength: 5, 
                        tickWidth: 1, 
                        dateTimeLabelFormats: { 
                            day: ‘%Y-%m-%d’, 
                            week: ‘%Y-%m-%d’, 
                            month: ‘%Y-%m-%d’, 
                            year: ‘%Y-%m-%d’ 
                        }, 
                        title: { 
                            style: 
                      { 
                          display: ‘none’ 
                      } 
                        } 
 
                    }, 
              yAxis: { 
                        allowDecimals: true, 
                        startOnTick: true, 
                        endOnTick: true, 
                        lineWidth: 1, 
                        gridLineWidth:0, 
                        gridLineColor: ‘#d3d3d3’, 
                        lineColor: ‘#000000’, 
                        tickColor: ‘#000000’, 
                        tickLength: 5, 
                        tickWidth: 1, 
                        title: { 
                            text: ‘重量(kg)’, 
                            style: { 
                                color: ‘#02528b’, 
                                fontSize: ’12px’, 
                                fontWeight: ‘normal’ 
 
                            } 
                        }, 
                        labels: { 
                            style: { 
                                color: ‘#000000’, 
                                fontSize: ’10px’, 
                                fontWeight: ‘normal’ 
                            } 
                        } 
                    }, 
                    legend: { 
                        layout: ‘horizontal’, 
                        backgroundColor: ‘#ffffff’, 
                        align: ‘right’, 
                        verticalAlign: ‘top’, 
                        x: 0, 
                        y: -10, 
                        floating: true, 
                        shadow: false, 
                        borderWidth: 0 
                    }, 
                    tooltip: { 
                        shared: true, 
                        crosshairs: true 
                    }, 
                    plotOptions: { 
                        spline: { 
                            shadow: false, 
                            animation: false, 
                            lineWidth: 1 
                        }, 
                        series: { 
                            color: ‘#000000’, 
                            marker: { 
                                enabled: true, 
                                fillColor: ‘#006ebe’, 
                                lineWidth: 1, 
                                lineColor: ‘#006ebe’, 
                                radius: 3 
                            } 
                        } 
                    }, 
                    series: [{ 
                        name: ‘重量’, 
                        data: [[Date.UTC(2012, 9, 8, 10, 22, 00),
88.8], [Date.UTC(2012, 9, 10, 10, 22, 00), 87.9], [Date.UTC(2012, 9,
13, 10, 00, 00), 87.4], [Date.UTC(2012, 9, 14, 12, 05), 87.2],
[Date.UTC(2012, 9, 16, 10, 00, 00), 87.2], [Date.UTC(2012, 9, 18, 10,
00, 00), 86.8], [Date.UTC(2012, 9, 22, 10, 00, 00), 86.5],
[Date.UTC(2012, 9, 25, 10, 00, 00), 86.5], [Date.UTC(2012, 9, 30, 10,
00, 00), 86.4]], 
                        dataLabels: { 
                            enabled: true 
                        } 
 
                    }] 
 
                }); 
            }); 
 
        }); 
    </script> 
</head> 
<body> 
    <script src=”Lib/Highcharts-2.2.5/js/highcharts.js”
type=”text/javascript”></script> 
    <!– <script
src=”../../js/modules/exporting.js”></script>–> 
    <div id=”bg” style=”margin: 0; padding: 0;”> 
        <div style=”width: 736px; margin: 0 auto; height: 27px;
line-height: 27px; font-family: Microsoft YaHei; 
            font-size: 14px”> 
            <span style=”color:
#006ebd;”>体重曲线图:</span><span style=”font-size: 14px;
color: #000000;”>单位[kg]</span></div> 
        <div id=”splineContainer” style=”width: 736px; height: 310px;
margin: 0 auto; padding-bottom: 10px; 
            border-bottom: 1px dashed #9b9b9b;”> 
        </div> 
    </div> 
</body> 
</html> 

import React, { Component } from ‘react’;
import {
AppRegistry,
StyleSheet,
PixelRatio,
Text,
View
} from ‘react-native’;

效果图

<!DOCTYPE HTML PUBLIC “-//W3C//DTD HTML 4.0 Transitional//EN”>
<html>
<head>
    <title>重量曲线图</title>
    <script type=”text/javascript”
src=”Lib/Scripts/jquery-1.7.2.min.js”></script>
    <script type=”text/javascript”>
        $(function () {
            var splinechart;
            $(document).ready(function () {
                splinechart = new Highcharts.Chart({
                    chart: {
                        renderTo: ‘splineContainer’,
                        type: ‘spline’,
                        margin: [25, 30, 70, 50]
                    },
                    title: {
                        text: ‘体重’,
                        x: 50,
                        y: 10,
                        style: {
                            display: ‘none’
                        }
                    },
                    color: [
                    ‘#006ebe’
                    ],
                    subtitle: {
                        style: {
                            display: ‘none’
                        }
                    },
                    xAxis: {
                        lineWidth: 1,
                        lineColor: ‘#dfe7ef’,
                        gridLineWidth: 0,
                        lineColor: ‘#000000’,
                        startOnTick: true,
                        tickPixelInterval: 110,
                        type: ‘datetime’,
                        labels: {
                            rotation: -45,
                            y: 40,
                            style: {
                                color: ‘#000000’,
                                fontSize: ‘8px’,
                                fontWeight: ‘normal’

const Header = require(‘./header’);

以下是 SegmentTabBar.js
<pre>
const React = require(‘react’);
const { ViewPropTypes } = ReactNative = require(‘react-native’);
const {
StyleSheet,
Text,
View,
TouchableOpacity,
Dimensions,
} = ReactNative;
const Button = require(‘./Button’);
const PhoneWidth = Dimensions.get(‘window’).width;
import Icon from ‘react-native-vector-icons/FontAwesome’;

                            }
                        },
                        tickColor: ‘#000000’,
                        tickLength: 5,
                        tickWidth: 1,
                        dateTimeLabelFormats: {
                            day: ‘%Y-%m-%d’,
                            week: ‘%Y-%m-%d’,
                            month: ‘%Y-%m-%d’,
                            year: ‘%Y-%m-%d’
                        },
                        title: {
                            style:
                      {
                          display: ‘none’
                      }
                        }

class RAsecond extends Component {
render() {
return (
<View style={styles.flex}>
<Header></Header>
<List
title=’一线城市楼房买卖市场退烧,有房源一夜跌价160万’></List>
<List title=’法国首都市民称墓地太贵买不起,买房存骨灰’></List>
<List
title=’朝鲜在发摄像:摧毁青瓦台,一切BlackBerry灰烬’></List>
<List title=’生活大爆炸职务原型好牛逼’></List>
<ImportantNews news={[
‘解放军报报中华社会大学楼正在拆除,标示已被卸下(图)’,
‘大韩民国停签东三省52旅行社,或为阻止朝旅游创收外汇’,
‘南大生发起亲吻不熟悉人活动,有女孩子献初吻-南大生发起轻吻南大生发起亲吻素不相识人活动,有女孩子献初吻-南大生发起轻吻南大生发起亲吻素不相识人活动,有女人献初吻-南大生发起轻吻南京学士发起亲吻目生人活动,有女孩子献初吻-南京博士发起轻吻’,
‘防汛总部布参谋长江防洪,避防御98年两基大洪涝为目的’
]}></ImportantNews>
</View>
);
}
}

</br>
const SegmentTabBar = React.createClass({
propTypes: {
goToPage: React.PropTypes.func,
activeTab: React.PropTypes.number,
tabs: React.PropTypes.array,
backgroundColor: React.PropTypes.string,
activeTextColor: React.PropTypes.string,
inactiveTextColor: React.PropTypes.string,
textStyle: Text.propTypes.style,
tabStyle: ViewPropTypes.style,
renderTab: React.PropTypes.func,
underlineStyle: ViewPropTypes.style,
},
</br>
getDefaultProps() {
return {
activeTextColor: ‘navy’,
inactiveTextColor: ‘black’,
backgroundColor: null,
};
},
</br>
renderTabOption(name, page) {
},
</br>
renderTab(name, page, isTabActive, onPressHandler) {
const { activeTextColor, inactiveTextColor, textStyle, } = this.props;
const textColor = isTabActive ? activeTextColor : inactiveTextColor;
const backgroundColor = isTabActive ? ‘#0086E5’ : ‘#FFF’;
const fontWeight = isTabActive ? ‘bold’ : ‘normal’;
console.log(textColor)
return <Button
style={{flex: 1,height:25,backgroundColor,borderRadius:1}}
key={name}
accessible={true}
accessibilityLabel={name}
accessibilityTraits=’button’
onPress={() => onPressHandler(page)}
>
<View style={[styles.tab, this.props.tabStyle]}>
<Text style={[{color: textColor, fontWeight}, textStyle, ]}>
{name}
</Text>
</View>
</Button>;
},
</br>
render() {
return (
<View style={styles.tabBarBox}>
<TouchableOpacity style={styles.iconBox} onPress={() => {}} >
<Icon name=”bell-o” size={20} color=”#333″ />
</TouchableOpacity>
<View style={[styles.tabs, {backgroundColor:
this.props.backgroundColor, }, this.props.style, ]}>
{this.props.tabs.map((name, page) => {
const isTabActive = this.props.activeTab === page;
const renderTab = this.props.renderTab || this.renderTab;
return renderTab(name, page, isTabActive, this.props.goToPage);
})}
</View>
<TouchableOpacity style={styles.iconBox} onPress={() => {}} >
<Icon name=”search” size={20} color=”#333″/>
</TouchableOpacity>
</View>
);
},
});
</br>
const styles = StyleSheet.create({
tabBarBox:{
height: 50,
flexDirection:’row’,
alignItems:’center’,
justifyContent:’space-between’
},
iconBox:{
margin:15
},
tab: {
flex: 1,
alignItems: ‘center’,
justifyContent: ‘center’,
},
tabs: {
borderRadius:2,
borderColor: ‘#0086E5’,
borderWidth:1,
width:PhoneWidth/3,
flexDirection: ‘row’,
alignItems:’center’,
alignContent:’center’,
justifyContent: ‘space-around’,
},
});
</br>
module.exports = SegmentTabBar;
</pre>
这里的Button.js
<pre>
const React = require(‘react’);
const ReactNative = require(‘react-native’);
const {
TouchableOpacity,
} = ReactNative;
</br>
const Button = (props) => {
return <TouchableOpacity {…props} activeOpacity={0.95}>
{props.children}
</TouchableOpacity>;
};
</br>
module.exports = Button;
</pre>
接下来在 ScrollableTabView 里面使用它
<pre>
<ScrollableTabView
style={styles.container}
tabBarPosition=’top’
tabBarBackgroundColor=’#FFFFFF’
tabBarActiveTextColor=’#fff’
tabBarInactiveTextColor=’#333′
tabBarTextStyle={{fontSize: 13}}
renderTabBar={() => <SegmentTabBar navigate />}>
<TopicList tabLabel=’发现’ {…this.props}/>
<MyCircle tabLabel=’作者的小圈子’ {…this.props}/>
</ScrollableTabView>
</pre>
xi
~~~~~~~~

                    },
              yAxis: {
                        allowDecimals: true,
                        startOnTick: true,
                        endOnTick: true,
                        lineWidth: 1,
                        gridLineWidth:0,
                        gridLineColor: ‘#d3d3d3’,
                        lineColor: ‘#000000’,
                        tickColor: ‘#000000’,
                        tickLength: 5,
                        tickWidth: 1,
                        title: {
                            text: ‘重量(kg)’,
                            style: {
                                color: ‘#02528b’,
                                fontSize: ’12px’,
                                fontWeight: ‘normal’

class List extends Component {
render() {
return (
<View style={styles.list_item}>
<Text
style={styles.list_item_font}>{this.props.title}</Text>
</View>
);
}
}

                            }
                        },
                        labels: {
                            style: {
                                color: ‘#000000’,
                                fontSize: ’10px’,
                                fontWeight: ‘normal’
                            }
                        }
                    },
                    legend: {
                        layout: ‘horizontal’,
                        backgroundColor: ‘#ffffff’,
                        align: ‘right’,
                        verticalAlign: ‘top’,
                        x: 0,
                        y: -10,
                        floating: true,
                        shadow: false,
                        borderWidth: 0
                    },
                    tooltip: {
                        shared: true,
                        crosshairs: true
                    },
                    plotOptions: {
                        spline: {
                            shadow: false,
                            animation: false,
                            lineWidth: 1
                        },
                        series: {
                            color: ‘#000000’,
                            marker: {
                                enabled: true,
                                fillColor: ‘#006ebe’,
                                lineWidth: 1,
                                lineColor: ‘#亚洲必赢官网,006ebe’,
                                radius: 3
                            }
                        }
                    },
                    series: [{
                        name: ‘重量’,
                        data: [[Date.UTC(2012, 9, 8, 10, 22, 00),
88.8], [Date.UTC(2012, 9, 10, 10, 22, 00), 87.9], [Date.UTC(2012, 9,
13, 10, 00, 00), 87.4], [Date.UTC(2012, 9, 14, 12, 05), 87.2],
[Date.UTC(2012, 9, 16, 10, 00, 00), 87.2], [Date.UTC(2012, 9, 18, 10,
00, 00), 86.8], [Date.UTC(2012, 9, 22, 10, 00, 00), 86.5],
[Date.UTC(2012, 9, 25, 10, 00, 00), 86.5], [Date.UTC(2012, 9, 30, 10,
00, 00), 86.4]],
                        dataLabels: {
                            enabled: true
                        }

class ImportantNews extends Component {

                    }]

show(title) {
alert(title);
}

                });
            });

render() {
var news = [];

        });
    </script>
</head>
<body>
    <script src=”Lib/Highcharts-2.2.5/js/highcharts.js”
type=”text/javascript”></script>
    <!– <script
src=”../../js/modules/exporting.js”></script>–>
    <div id=”bg” style=”margin: 0; padding: 0;”>
        <div style=”width: 736px; margin: 0 auto; height: 27px;
line-height: 27px; font-family: Microsoft YaHei;
            font-size: 14px”>
            <span style=”color:
#006ebd;”>体重曲线图:</span><span style=”font-size: 14px;
color: #000000;”>单位[kg]</span></div>
        <div id=”splineContainer” style=”width: 736px; height: 310px;
margin: 0 auto; padding-bottom: 10px;
            border-bottom: 1px dashed #9b9b9b;”>
        </div>
    </div>
</body>
</html>

for(var i in this.props.news){
  var text = (
    <Text onPress={this.show.bind(this, this.props.news[i])}
      numberOfLines={2}
      style={styles.news_item}
      key={i}
      >{this.props.news[i]}</Text>
  );
  news.push(text);
}

return (
  <View style={styles.flex}>
    <Text style={styles.news_title}>今日要闻</Text>

    {news}
  </View>
);

 

}
}

运作效果:

const styles = StyleSheet.create({
flex:{
flex:1
},
list_item:{
height:40,
marginLeft:10,
marginRight:10,
borderBottomWidth:1,
borderBottomColor:’#ddd’,
justifyContent:’center’
},
list_item_font:{
fontSize:16
},
news_title:{
fontSize:20,
fontWeight:’bold’,
color:’#CD1D1C’,
marginLeft:10,
marginTop:5,
},
news_item:{
marginLeft:10,
marginRight:10,
fontSize:15,
lineHeight:30,
}
});

 

AppRegistry.registerComponent(‘RAsecond’, () => RAsecond);

 亚洲必赢官网 8

/**

 

  • Sample React Native App
  • https://github.com/facebook/react-native
  • @flow
    */

代码:
[html] !DOCTYPE HTML PUBLIC -//W3C//DTD HTML 4.0 Transitional//EN html
head title重量曲线图/title script typ…

import React, { Component } from ‘react’;
import {
AppRegistry,
StyleSheet,
PixelRatio,
Text,
View
} from ‘react-native’;

class Header extends Component {
render() {
return (
<View style={styles.flex}>
<Text style={styles.font}>
<Text style={styles.font_1}>网易</Text>
<Text style={styles.font_2}>新闻</Text>
<Text>有态度</Text>
</Text>
</View>
);
}
}

const styles = StyleSheet.create({
flex:{
marginTop:23,
height:50,
borderBottomWidth:3/PixelRatio.get(),
borderBottomColor:’#EF2D36′,
alignItems:’center’
},
font:{
fontSize:25,
fontWeight:’bold’,
textAlign:’center’
},
font_1:{
color:’#CD1D1C’
},
font_2:{
color:’#FFF’,
backgroundColor:’#CD1D1C’
}

});

module.exports = Header;

网站地图xml地图