react-native从入门到放弃（4）样式与布局

样式

使用React Native，您不需要使用特殊语言或语法来定义样式。您只需使用JavaScript设计应用程序。所有的核心组件都接受一个名字命名style。样式名称和值通常与CSS在CSS上的工作方式相匹配，除了使用驼峰命名，backgroundColor而不是background-color。

style 可以是一个普通的JavaScript对象，还可以传递一个样式数组-数组中的最后一个样式为最高优先级，因此可以使用继承样式。

需要引入一个新的 ** StyleSheet **

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('AwesomeProject', () => LotsOfStyles);

看起来像这样

更多样式以后可以参考文档
facebook: Text组件实现
China: Text组件实现 For China

Frame (宽高)

固定尺寸

设置组件尺寸的最简单的方法是添加一个固定width和height样式。React Native中的所有尺寸都是无单位的，并且表示密度无关的像素。

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: 1它来告诉组件填充所有可用空间，并在同一个父项之间在每个其他组件之间均匀分配。空间的分量将采取相比

如果一个组件的父对象的维数大于0，则该组件只能扩展为填充可用空间。如果父项没有固定的width，height或者flex父对象的维度为0，并且flex子控件将不可见。

举个例子

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);