RN基础入门( 样式、flex布局、响应式布局 )

RN基础入门

使用 rnc快捷键创建 class类组件
使用rncs 快捷键 创建 class类组件 包含样式

一、StyleSheet 样式

1：没有继承性 => RN的继承只发生再Text组件身上
2：样式名采用小驼峰命名 => fontSize
3：所有尺寸都是没有单位 => width: 100
4：有些特殊的样式名
margin Horizontali (水平外边距), marginVertical (垂直外边距)

声明样式

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



export default class app extends Component {
  render() {
    return (
      <View>
        <Text style={{color: 'red', fontSize: 20}}>app</Text>
        <Text style={[{color: 'orange'}, [{marginTop: 10}]]}>我是橙色距离顶部10px</Text>
        <View>
          <Text style={[styles.red]}>我说我是红色的</Text>
          <Text style={[styles.orange, styles.mt10]}>我是橙色距离顶部10px</Text>
        </View>
      </View>
    )
  }
}

const styles = StyleSheet.create({
  red: {
    color: 'red',
    fontSize: 20
  },
  orange: {
    color: 'orange',
    fontSize: 20
  },
  mt10: {
    marginTop: 10
  }
})

二、Flexbox语法( 弹性布局 )

1：flexDirection （ row、column ） 设置主轴的方向与设置为flex布局
2：justifyContent 水平展示
3：alignItems 垂直展示
4：flex 1 占据剩余空间

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

export default function app() {
  return (
    <View>
      <Text>默认flex布局方向</Text>
      <View style={[styles.flexRow]}>
        <Text>111</Text>
        <Text>222</Text>
        <Text>333</Text>
      </View>
      <Text>flex垂直方向</Text>
      <View style={[styles.flexColumn]}>
        <Text>111</Text>
        <Text>222</Text>
        <Text>333</Text>
      </View>
      <View style={[styles.flexBW]}>
        <Text>1</Text>
        <Text>2</Text>
      </View>
      <View style={[styles.flexRow]}>
        <Text style={[styles.w100]}>1</Text>
        <Text style={[styles.flex1]}>2</Text>
      </View>
    </View>
  )
}

const styles = StyleSheet.create({
  flexRow: {
    flexDirection: 'row',
  },
  flexColumn: {
    flexDirection: 'column',
  },
  flexBW: {
    flexDirection: 'row',
    justifyContent: 'space-between',
    height: 30,
    borderColor: 'red',
    borderWidth: 1,
    alignItems: 'center',
    paddingHorizontal: 10,
    marginHorizontal: 10
  },
  flex1: {
    flex: 1,
    backgroundColor: 'orange'
  },
  w100: {
    width: 100,
    backgroundColor: 'pink'
  }
})

效果

三、响应式布局

1：百分比 布局
2：Dimensions 计算可视区宽度 进行平分宽度

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

export default class app extends Component {
  render() {
    return (
      <View>
        <View style={[styles.container]}>
          <Text style={[styles.box20, styles.boxItem]}>app</Text>
          <Text style={[styles.box30, styles.boxItem]}>app</Text>
          <Text style={[styles.box50, styles.boxItem]}>app</Text>
        </View>
        <View style={[styles.container]}>
          <Text style={[ styles.boxItem2]}>app</Text>
          <Text style={[ styles.boxItem2]}>app</Text>
          <Text style={[ styles.boxItem2]}>app</Text>
        </View>
      </View>
    );
  }
}

const styles = StyleSheet.create({
  container: {
    flexDirection: 'row'
  },
  boxItem: {
    borderWidth: 1,
    borderColor: 'red',
    height: 30
  },
  box20: {
    width: '20%'
  },
  box30: {
    width: '30%'
  },
  box50: {
    width: '50%'
  },
  boxItem2: {
    borderWidth: 1,
    borderColor: 'red',
    height: 30,
    width: Dimensions.get('window').width / 3,
    marginTop: 10
  }
});

效果