React Native - Flexbox

简述

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

我们将使用我们在我们的代码中使用的相同代码React Native - Styling章节。我们只会改变PresentationalComponent.

布局

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

下表显示了可能的选项。

财产	价值观	描述
弹性方向	“列”、“行”	用于指定元素是垂直对齐还是水平对齐。
证明内容	'center', 'flex-start', 'flex-end', 'space-around', 'space-between'	用于确定元素在容器内的分布方式。
对齐项目	'中心'，'flex-start'，'flex-end'，'拉伸'	用于确定元素应如何沿辅助轴（与 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'
   },
})

Output

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

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

简述

布局