React Native - Flexbox

为了适应不同的屏幕尺寸，React Native 提供了Flexbox支持。

我们将使用与React Native - 样式章节中使用的代码相同的代码。我们只会更改PresentationalComponent。

布局

为了实现所需的布局，flexbox 提供了三个主要属性 - flexDirection justifyContent和alignItems。

下表显示了可能的选项。

财产 价值观 描述
弹性方向 ‘列’、‘行’ 用于指定元素是垂直对齐还是水平对齐。
调整内容 “中心”、“弹性开始”、“弹性结束”、“周围空间”、“空间之间” 用于确定元素应如何在容器内分布。
对齐项目 “中心”、“弯曲开始”、“弯曲结束”、“拉伸” 用于确定元素应如何沿辅助轴（与 flexDirection 相反）分布在容器内

如果你想垂直对齐项目并将它们居中，那么你可以使用以下代码。

应用程序.js

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

const Home = (props) => {
   return (
      <View style = {styles.container}>
         <View style = {styles.redbox} />
         <View style = {styles.bluebox} />
         <View style = {styles.blackbox} />
      </View>
   )
}

export default Home

const styles = StyleSheet.create ({
   container: {
      flexDirection: 'column',
      justifyContent: 'center',
      alignItems: 'center',
      backgroundColor: 'grey',
      height: 600
   },
   redbox: {
      width: 100,
      height: 100,
      backgroundColor: 'red'
   },
   bluebox: {
      width: 100,
      height: 100,
      backgroundColor: 'blue'
   },
   blackbox: {
      width: 100,
      height: 100,
      backgroundColor: 'black'
   },
})

输出

React Native Flexbox 中心

如果需要将项目移到右侧，并且项目之间需要添加空格，那么我们可以使用以下代码。

应用程序.js

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

const App = (props) => {
   return (
      <View style = {styles.container}>
         <View style = {styles.redbox} />
         <View style = {styles.bluebox} />
         <View style = {styles.blackbox} />
      </View>
   )
}

export default App

const styles = StyleSheet.create ({
   container: {
      flexDirection: 'column',
      justifyContent: 'space-between',
      alignItems: 'flex-end',
      backgroundColor: 'grey',
      height: 600
   },
   redbox: {
      width: 100,
      height: 100,
      backgroundColor: 'red'
   },
   bluebox: {
      width: 100,
      height: 100,
      backgroundColor: 'blue'
   },
   blackbox: {
      width: 100,
      height: 100,
      backgroundColor: 'black'
   },
})

React Native Flexbox 正确