React Native - Flexbox

  • 简述

    为了适应不同的屏幕尺寸,React Native 提供Flexbox支持。
    我们将使用我们在我们的代码中使用的相同代码React Native - Styling章节。我们只会改变PresentationalComponent.
  • 布局

    为了实现所需的布局,flexbox 提供了三个主要属性 -flexDirection justifyContentalignItems.
    下表显示了可能的选项。
    财产 价值观 描述
    弹性方向 “列”、“行” 用于指定元素是垂直对齐还是水平对齐。
    证明内容 '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
    React Native Flexbox 中心
    如果项目需要移动到右侧并且需要在它们之间添加空格,那么我们可以使用以下代码。
    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