React-Native 认识style_3

3.1 RN页面布局flexbox

当听到flexbox, 作为一个纯碎的iOS开发者,听到这个内心是懵逼的.只能去找HTML,css找什么叫盒子.盒子大概如下图:

10153449_ZoQu.png

总体来说就是一个视图的真身不只是有内容,包括:内容,内边距,边框,外边距.

3.2 RN的盒子基础->样式.

首先导入要样式库.这个是必须的.

import {
  StyleSheet   /*这个是样式库*/
} from 'react-native';

3.2.1 内联样式(相对HTML而言)

<View>
      < Text style = {       
        {
          color: 'red',
          fontSize: 40,
          textAlign: 'center',
          backgroundColor: 'gray',
        }
      } >
      内联样式
      </Text>
</View>

3.2.2 对象样式(相对HTML而言)

先实例一个样式对象

var textStyle = {
  color: 'red',
  fontSize: 40,
  textAlign: 'center',
  backgroundColor: 'gray',
  marginTop: 200,
};

然后使用

< Text style = { textStyle} >
      对象样式 
< /Text> 

※ 3.2.3 StyleSheet样式管理器生成样式(RN所用的样式方式)

const styles = StyleSheet.create({
  // 这相当于 css class 一样
  container: {
    width: 350,
    height: 500,
    backgroundColor: 'red',
  },
  myTextStyle: {
    width: 100,
    height: 50,
    backgroundColor: 'green',
    fontSize: 10,
  },
});

使用

<View style={styles.container}>

</View>

※ 3.2.3.1 多个样式混合使用

使用数组的方式,把要混合的样式放在里面

< Text style = {
        [jnStyle.textFont, jnStyle.textbgColor]
      } >
      style.create样式 样式混用 
< /Text> 

3.2.4 样式分离

很多场景我们都希望把样式放到一个相关的文件中去
在目录下创建一个styles.js

import React from 'react';
import {
  StyleSheet
  /*这个是样式库*/
} from 'react-native';

const jnStyle = StyleSheet.create({
  myTextStyle: {
    width: 100,
    height: 50,
    backgroundColor: 'green',
    fontSize: 10,
  },

  textFont: {
    fontSize: 30,
  },

  textbgColor: {
    backgroundColor: '#FFF',
  },
});
/*开放该样式给其他文件使用*/
module.exports = jnStyle;

使用

import jnStyle from './styles';   //相对位置