CSS和UI布局

1、建立一个空白界面

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

export default class MNAPP extends Component {
  render() {
    return (
      <View>
          <View></View>
      </View>
    );
  }
}

const styles = StyleSheet.create({
});

AppRegistry.registerComponent('MNAPP', () => MNAPP);

2、增加一个带边框的矩形，红色边框，也就是说一个view边框是红色的

export default class MNAPP extends Component {
  render() {
    return (
      <View>
          <View style={styles.redBorderView}></View> // ①
      </View>
    );
  }
}

const styles = StyleSheet.create({
  redBorderView: { // ②
    height: 44,
    borderWidth: 1,
    borderColor: 'red',
  },
});

效果：

3、那么怎么知道有哪些样式呢？
例如：bordercolor还是borderColor

先：bordercolor: 'red',

运行：

Valid style props就是对应的样式

4、Flexbox布局

当一个(元素)组件，定义了flex属性时，表示该元素是可伸缩的。当然flex的属性值是大于0的时候才伸缩，其小于和等于0的时候不伸缩

(1)下面将界面平均分为3份

export default class MNAPP extends Component {
  render() {
    return (
      <View style={styles.flex_view_0}>
        <View style={styles.flex_view_1}></View>
        <View style={styles.flex_view_1}></View>
        <View style={styles.flex_view_1}></View>
      </View>
    );
  }
}

const styles = StyleSheet.create({
  flex_view_0: {
    flex: 1,
    borderWidth: 1,
    borderColor: 'green',
  },
  flex_view_1: {
    flex: 2,
    borderWidth: 1,
    borderColor: 'green',
  }
});

效果：

(2)修改flexDirection为row:

export default class MNAPP extends Component {
  render() {
    return (
      <View style={[styles.flex_view_0, {flexDirection: 'row'}]}>
        <View style={styles.flex_view_1}></View>
        <View style={styles.flex_view_1}></View>
        <View style={styles.flex_view_1}></View>
      </View>
    );
  }
}

const styles = StyleSheet.create({
  flex_view_0: {
    flex: 1,
    borderWidth: 1,
    borderColor: 'green',
  },
  flex_view_1: {
    flex: 2,
    borderWidth: 1,
    borderColor: 'green',
  }
});

(3)alignSelf的几种摆放：

export default class MNAPP extends Component {
  render() {
    return (
      <View style={[styles.flex_view_0, {flexDirection: 'row'}]}>
        <View style={[styles.flex_view_1, , styles.left]}>
          <Text style={{fontSize: 20}}>1/3靠左摆放</Text>
        </View>
        <View style={[styles.flex_view_1, styles.center]}>
          <Text style={{fontSize: 20}}>1/3居中摆放</Text>
        </View>
        <View style={[styles.flex_view_1, styles.right]}>
          <Text style={{fontSize: 20}}>1/3靠右摆放</Text>
        </View>
      </View>
    );
  }
}

const styles = StyleSheet.create({
  flex_view_0: {
    flex: 1,
    borderWidth: 1,
    borderColor: 'green',
  },
  flex_view_1: {
    flex: 2,
    borderWidth: 1,
    borderColor: 'green',
  },
  center: {
    alignSelf: 'center',
  },
  left: {
    alignSelf: 'flex-start',
  },
  right: {
    alignSelf: 'flex-end',
  },
});

(4)alignItems：水平居中、justifyContent：垂直居中

export default class MNAPP extends Component {
  render() {
    return (
      <View style={styles.view_0}>
        <View style={styles.view_1}>
          <Text style={{fontSize: 20}}>
            方块居中
          </Text>
        </View>
      </View>
    );
  }
}

const styles = StyleSheet.create({
  view_0: {
    flex: 1,
    borderWidth: 1,
    borderColor: 'red',
    alignItems: 'center',
    justifyContent: 'center',
  },
  view_1: {
    borderWidth: 1,
    borderColor: 'blue',
    height: 44,
  },
});

效果：

GitHub：https://github.com/Yangchengfeng/react-native-learning/tree/useCSStoLayout