报告:目前完成度【 0.5/3 】,预计上线时间:【 未知 】 【问卷调查】
英文链接源链接 [6855]
contenteditable="true"

React Native - Flexbox 介绍

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

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

布局

为了获得所需的布局,flexbox提供了三个主要属性- flexDirection justifyContent 和 alignItems 。

下表显示了可能的options。

属性说明
flexDirection"列","行"用于指定元素是垂直对齐还是水平对齐。
justifyContent"中心","弹性开始","弹性结束","周围空间","中间间隔"用于确定元素应如何在容器内分布。
alignItems"中心","弹性开始","弹性结束","拉伸"用于确定元素应如何沿容器内的辅助轴(与flexDirection相反)分布

如果要垂直对齐项目并将其居中,则可以使用以下代码。

App.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 Center

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

App.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 Right
点我分享笔记