React-native之Flexbox

本文总结:

我们学到了 React Native 的 Flexbox 布局，它让写样式变得更方便啦！ Flexbox 就像一个有弹性的盒子，有主轴和交叉轴（行或列）。

在 RN 里写样式要用 StyleSheet.create 对象，属性名是驼峰命名。

文章还介绍了如何用 Platform.select 给不同平台写样式，以及使用 styled-components 这个库的简单例子（虽然我们主要还是用 StyleSheet）。

文章还通过三栏布局和横向布局的例子，展示了 flexDirection, alignItems, justifyContent 和 alignSelf 这些属性的用法。

特别喜欢 alignSelf: 'stretch' 能让元素填充空间的技巧！

最后，通过抽象出 Row 和 Col 组件，我看到了如何用 Flexbox 实现更复杂的嵌套布局。感觉 Flexbox 真的让布局变得灵活多了！

1、关于Flexbox

在将flexbox引入css前，构建布局的各种css属性都比较粗糙，而且很容易出错。而flexbox通过抽象了很多属性来解决问题。字如其名flexbox的意思就是一个具有弹性的盒子模型。我们画个图：假设你有一个容器和它的子元素，它看起来可以是这样的。

Flexbox容器有二个轴，即列（向上/向下）或行（左/右）。

2、实操

我们直接上代码吧,这是一个js模块，而不是css模块。如果我们要声明rn的样式，我们需要去定义一个对象然后调用StyleSheet.create()最后抛出它在你的模块中。但是我们需要注意的是rn只支持驼峰命名。

import { Platform, StyleSheet, StatusBar } from 'react-native'
export default StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
    backgroundColor: 'ghostwhite',
    ...Platform.select({
      ios: { paddingTop: 20 },
      android: { paddingTop: StatusBar.currentHeight },
    }),
  },
  box: {
    width: 100,
    height: 100,
    justifyContent: 'center',
    alignItems: 'center',
    backgroundColor: 'lightgray',
  },
  boxText: {
    color: 'darkslategray',
    fontWeight: 'bold',
  },
})

然后我们看到刚才我写了这样一段代码,这里其实就是根据你的移动端去选择样式。

...Platform.select({
  ios: { paddingTop: 20 },
  android: { paddingTop: StatusBar.currentHeight },
}),

ok，我们看一下在rn组件中如何使用

import { Text, View } from 'react-native'
import styles from './styles'
export default function App() {
  return (
      <View style={styles.container}>
      <View style={styles.box}>
        <Text style={styles.boxText}>I'm in a box</Text>
      </View>
    </View>
  )
}

这些样式将通过样式属性分配给每个组件。我们来看看它的表现。

3、Styled-components样式组件库使用

Styled-components是一个css-in-js的库为我们的组件去提供样式，如我们去直接看看怎么使用吧。当然只是介绍一下，我们还是使用styleSheet。

首先下载依赖

yarn add styled-components

然后我们写点代码

import styled from "styled-components/native";
const Box = styled.View'
    width: 100px;
    height: 100px;
    justify-content: center;
    align-items: center;
    background-color: lightgray;
';
const BoxText = styled.Text'
    color: darkslategray;
    font-weight: bold;
';

使用

const App = () => {
return (
    <Box>
        <BoxText>I'm in a box</BoxText>
    </Box>
);

};

4、基础Flexbox

接下来主要讲一下rn中的几种常见布局和flexbox的实战

4.1、三栏布局

普通的从上到下的三栏布局。

你可以把view理解成div,text理解成p。

import { Text, View } from 'react-native'
import styles from './styles'
export default function App() {
  return (
      <View style={styles.container}>
      <View style={styles.box}>
        <Text style={styles.boxText}>#1</Text>
      </View>
      <View style={styles.box}>
        <Text style={styles.boxText}>#2</Text>
      </View>
      <View style={styles.box}>
        <Text style={styles.boxText}>#3</Text>
      </View>
    </View>
  )
}

flexDirection属性是决定了主轴的方向，上到下或者左到右，而alignItem和justifyContent属性决定了元素的排列和间隔。

import { Platform, StyleSheet, StatusBar } from 'react-native'
export default StyleSheet.create({
  container: {
    flex: 1,
    flexDirection: 'column',
    alignItems: 'center',
    justifyContent: 'space-around',
    backgroundColor: 'ghostwhite',
    ...Platform.select({
      ios: { paddingTop: 20 },
      android: { paddingTop: StatusBar.currentHeight },
    }),
  },
  box: {
    width: 300,
    height: 100,
    justifyContent: 'center',
    alignItems: 'center',
    backgroundColor: 'lightgray',
    borderWidth: 1,
    borderStyle: 'dashed',
    borderColor: 'darkslategray',
  },
  boxText: {
    color: 'darkslategray',
    fontWeight: 'bold',
  },
})

而如果我们想让它左右两边填满那？就像这样

我们可以加入alignSelf这个属性，这个属性的意思是根据主轴flexDirection的方向，改变宽度或者高度（column改变的就是宽度，row改变的就是高度）去填充空白，动态计算高度或宽度。像这样就是会填满你屏幕的宽度。

  box: {
    height: 100,
    justifyContent: 'center',
    //
    alignSelf: 'stretch',
    alignItems: 'center',
    backgroundColor: 'lightgray',
    borderWidth: 1,
    borderStyle: 'dashed',
    borderColor: 'darkslategray',
  },

当我们把手机横过去

我们稍微优化一下，正好也写一下横向的布局，上面的样式太`抽象`了写得。

import { Text, View, StatusBar } from 'react-native'
import styles from './styles'
import Box from './Box'
export default function App() {
 return (
    <View style={styles.container}>
     <Box>#1</Box>
     <Box>#2</Box>
   </View>
 )
}

import { PropTypes } from 'prop-types'
import { View, Text } from 'react-native'
import styles from './styles'
export default function Box({ children }) {
 return (
   <View style={styles.box}>
     <Text style={styles.boxText}>{children}</Text>
   </View>
 )
}
Box.propTypes = {
 children: PropTypes.node.isRequired,
}

这个就是会拉伸至整个屏幕高度的横向布局

import { Platform, StyleSheet, StatusBar } from 'react-native'
export default StyleSheet.create({
  container: {
    flex: 1,
    flexDirection: 'row',
    backgroundColor: 'ghostwhite',
    alignItems: 'center',
    justifyContent: 'space-around',
    ...Platform.select({
      ios: { paddingTop: 20 },
      android: { paddingTop: StatusBar.currentHeight },
    }),
  },
  box: {
    width: 100,
    justifyContent: 'center',
    alignSelf: 'stretch',
    alignItems: 'center',
    backgroundColor: 'lightgray',
    borderWidth: 1,
    borderStyle: 'dashed',
    borderColor: 'darkslategray',
  },
  boxText: {
    color: 'darkslategray',
    fontWeight: 'bold',
  },
})

我们来看看它的表现

当我们把手机横过去

5、稍微复杂一点的flexBox

假设我们要实现这样一个效果,我们该如何实现？

在我们的意识中，整个布局有行、列。那我们同样也可以抽象出col、row组件分别代表行列。我们直接上代码吧。

可以看到我们分别确定了col、row的方向和排列。

import { Platform, StyleSheet, StatusBar } from 'react-native'

export default StyleSheet.create({
  container: {
    flex: 1,
    flexDirection: 'column',
    backgroundColor: 'ghostwhite',
    alignItems: 'center',
    justifyContent: 'space-around',
    ...Platform.select({
      ios: { paddingTop: 40 },
      android: { paddingTop: StatusBar.currentHeight },
    }),
  },

  box: {
    height: 100,
    width: 100,
    justifyContent: 'center',
    alignItems: 'center',
    borderWidth: 1,
    borderStyle: 'dashed',
    borderColor: 'darkslategray',
    backgroundColor: 'lightgray',
  },

  boxText: {
    color: 'darkslategray',
    fontWeight: 'bold',
  },

  row: {
    flex: 1,
    flexDirection: 'row',
    justifyContent: 'space-around',
    alignSelf: 'stretch',
  },

  column: {
    flex: 1,
    flexDirection: 'column',
    alignItems: 'center',
    justifyContent: 'space-around',
    alignSelf: 'stretch',
  },
})

组件部分

app

import { View, StatusBar } from 'react-native'
import styles from './styles'
import Row from './Row'
import Col from './Col'
import Box from './Box'
export default function App() {
  return (
  <View style={styles.container}>
      <StatusBar hidden={false} />
      <Row>
        <Col>
          <Box>#1</Box>
          <Box>#2</Box>
        </Col>
        <Col>
          <Box>#3</Box>
          <Box>#4</Box>
        </Col>
      </Row>
      <Row>
        <Col>
          <Box>#5</Box>
          <Box>#6</Box>
        </Col>
        <Col>
          <Box>#7</Box>
          <Box>#8</Box>
        </Col>
      </Row>
      <Row>
        <Col>
          <Box>#9</Box>
          <Box>#10</Box>
        </Col>
        <Col>
          <Box>#11</Box>
          <Box>#12</Box>
        </Col>
      </Row>
    </View>
  )
}

col

import PropTypes from 'prop-types'
import { View } from 'react-native'
import styles from './styles'
export default function Column({ children }) {
  return <View style={styles.column}>{children}</View>
}

Column.propTypes = {
  children: PropTypes.node.isRequired,
}

row

import PropTypes from 'prop-types'
import { View } from 'react-native'
import styles from './styles'
export default function Row({ children }) {
  return <View style={styles.row}>{children}</View>
}

Row.propTypes = {
  children: PropTypes.node.isRequired,
}

import React from 'react'
import PropTypes from 'prop-types'
import { View, Text } from 'react-native'
import styles from './styles'
export default function Box({ children }) {
  return (
    <View style={styles.box}>
      <Text style={styles.boxText}>{children}</Text>
    </View>
  )
}

Box.propTypes = {
  children: PropTypes.node.isRequired,
}

6、总结

欢迎加入群聊，我们一起讨论一些更有趣的技术、商业、闲聊。