React Native的布局

Style样式

使用React Native，不要使用特殊语言或语法来定义样式。 你只需使用JavaScript来设计你的应用程序。 所有的核心组件接受props命名风格。 样式名称和值通常匹配CSS在Web上的工作方式，除了名称被写为backgroundColor而不是像background-color。 样式prop可以是一个普通的旧JavaScript对象。 这是最简单的，我们通常用于示例代码。 您还可以传递样式数组 - 数组中的最后一个样式具有优先级，因此可以使用它来继承样式。 由于组件的复杂性增加，使用StyleSheet.create在一个位置定义多个样式通常更加清晰。 这里有一个例子： 

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

import React, { Component } from 'react';
import { AppRegistry, StyleSheet, Text, View } from 'react-native';

class LotsOfStyles extends Component {
  render() {
    return (
      <View>
        <Text style={styles.red}>just red</Text>
        <Text style={styles.bigblue}>just bigblue</Text>
        <Text style={[styles.bigblue, styles.red]}>bigblue, then red</Text>
        <Text style={[styles.red, styles.bigblue]}>red, then bigblue</Text>
      </View>
    );
  }
}

const styles = StyleSheet.create({
  bigblue: {
    color: 'blue',
    fontWeight: 'bold',
    fontSize: 30,
  },
  red: {
    color: 'red',
  },
});

AppRegistry.registerComponent('LotsOfStyles', () => LotsOfStyles);
一个常见的模式是使你的组件接受一个样式属性，反过来，它被用于样式子组件。 你可以使用它来使样式“级联”他们在CSS中的方式。 有很多自定义文本样式的方法。 查看Text组件引用以获取完整列表。 现在你可以让你的文本美丽。 成为风格大师的下一步是学习如何控制组件大小。

高和宽

组件的高度和宽度决定了其在屏幕上的大小。

固定尺寸

设置组件尺寸的最简单的方法是通过向样式添加固定的宽度和高度。 React Native中的所有维都是无单位的，表示与密度无关的像素。 

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16

import React, { Component } from 'react';
import { AppRegistry, View } from 'react-native';

class FixedDimensionsBasics extends Component {
  render() {
    return (
      <View>
        <View style={ {width: 50, height: 50, backgroundColor: 'powderblue'} } />
        <View style={ {width: 100, height: 100, backgroundColor: 'skyblue'} } />
        <View style={ {width: 150, height: 150, backgroundColor: 'steelblue'} } />
      </View>
    );
  }
};

AppRegistry.registerComponent('AwesomeProject', () => FixedDimensionsBasics);
以此方式设置尺寸对于始终按照完全相同的大小呈现的组件而言是常见的，而不管屏幕尺寸如何。

Flex尺寸

在组件的样式中使用flex，以根据可用空间动态地展开和缩小组件。 通常你将使用flex：1，它告诉组件填充所有可用空间，在相同的父组件之间均匀分配。 给定的flex越大，组件与其兄弟节点相比所需的空间比例越高。

如果组件的父级的尺寸大于0，则组件只能扩展以填充可用空间。如果父级组件不具有固定宽度和高度或flex，则父级的尺寸为0，而flex子组件将不可见。 
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19

import React, { Component } from 'react';
import { AppRegistry, View } from 'react-native';

class FlexDimensionsBasics extends Component {
  render() {
    return (
      // Try removing the `flex: 1` on the parent View.
      // The parent will not have dimensions, so the children can't expand.
      // What if you add `height: 300` instead of `flex: 1`?
      <View style={ {flex: 1} }>
        <View style={ {flex: 1, backgroundColor: 'powderblue'} } />
        <View style={ {flex: 2, backgroundColor: 'skyblue'} } />
        <View style={ {flex: 3, backgroundColor: 'steelblue'} } />
      </View>
    );
  }
};

AppRegistry.registerComponent('AwesomeProject', () => FlexDimensionsBasics);
在您可以控制组件的大小后，下一步是学习如何将其放在屏幕上。

使用Flexbox布局

组件可以使用flexbox算法指定其子项的布局。 Flexbox旨在在不同的屏幕尺寸上提供一致的布局。 你通常会使用flexDirection，alignItems和justifyContent的组合来实现正确的布局。

Flexbox在React Native中的工作方式与在Web上的CSS中的工作方式相同，但有一些例外。 默认值不同，flexDirection默认为column而不是row，alignItems默认为stretch而不是flex-start，flex参数只支持一个数字。

Flex方向

将flexDirection添加到组件的样式确定其布局的主轴。 孩子们应该是水平（行）还是垂直（列）组织？ 默认值为column。 

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17

import React, { Component } from 'react';
import { AppRegistry, View } from 'react-native';

class FlexDirectionBasics extends Component {
  render() {
    return (
      // Try setting `flexDirection` to `column`.
      <View style={ {flex: 1, flexDirection: 'row'} }>
        <View style={ {width: 50, height: 50, backgroundColor: 'powderblue'} } />
        <View style={ {width: 50, height: 50, backgroundColor: 'skyblue'} } />
        <View style={ {width: 50, height: 50, backgroundColor: 'steelblue'} } />
      </View>
    );
  }
};

AppRegistry.registerComponent('AwesomeProject', () => FlexDirectionBasics);

证明内容

将justifyContent添加到组件的样式确定沿主轴的子项分布。 是否应该在开始，中心，结束或均匀分布children？ 可用选项包括flex-start，center，flex-end，space-around和space-between。 

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22

import React, { Component } from 'react';
import { AppRegistry, View } from 'react-native';

class JustifyContentBasics extends Component {
  render() {
    return (
      // Try setting `justifyContent` to `center`.
      // Try setting `flexDirection` to `row`.
      <View style={ {
        flex: 1,
        flexDirection: 'column',
        justifyContent: 'space-between',
      } }>
        <View style={ {width: 50, height: 50, backgroundColor: 'powderblue'} } />
        <View style={ {width: 50, height: 50, backgroundColor: 'skyblue'} } />
        <View style={ {width: 50, height: 50, backgroundColor: 'steelblue'} } />
      </View>
    );
  }
};

AppRegistry.registerComponent('AwesomeProject', () => JustifyContentBasics);

对齐

将alignItems添加到组件的样式确定沿辅助轴的子对齐（如果主轴是行，则辅助轴是列，反之亦然）。 children应该在开始，中心，结束，还是伸展填充？ 可用选项有flex-start，center，flex-end和stretch。

为了拉伸有效果，children不得沿着辅助轴具有固定尺寸。 在下面的示例中，设置alignItems：stretch不执行任何操作，直到宽度：50从子项中删除。 
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24

import React, { Component } from 'react';
import { AppRegistry, View } from 'react-native';

class AlignItemsBasics extends Component {
  render() {
    return (
      // Try setting `alignItems` to 'flex-start'
      // Try setting `justifyContent` to `flex-end`.
      // Try setting `flexDirection` to `row`.
      <View style={ {
        flex: 1,
        flexDirection: 'column',
        justifyContent: 'center',
        alignItems: 'center',
      } }>
        <View style={ {width: 50, height: 50, backgroundColor: 'powderblue'} } />
        <View style={ {width: 50, height: 50, backgroundColor: 'skyblue'} } />
        <View style={ {width: 50, height: 50, backgroundColor: 'steelblue'} } />
      </View>
    );
  }
};

AppRegistry.registerComponent('AwesomeProject', () => AlignItemsBasics);

深入探讨

我们已经介绍了基础知识，但是有许多其他样式可能需要布局。 控制布局的道具的完整列表在这里记录。 我们正在接近能够构建一个真正的应用程序。 我们还缺少一个方法来接受用户输入，所以让我们继续学习如何使用TextInput组件处理文本输入。

written by Rick posted at http://ITMonkeyLife.github.io/Blog

React Native
Comments

Comments