React Native 之 Flexbox 布局

作者：System 时间：2024年08月10日分类：所有,react native 字数：649




import React from 'react';
import { View, Text, Image } from 'react-native';
 
const FlexDimensionsBasics = () => {
  return (
    // 外层View使用flex: 1确保它占据全部可用空间
    <View style={{ flex: 1 }}>
      <View style={{ flex: 1, backgroundColor: 'blue' }} />
      <View style={{ flex: 2, backgroundColor: 'red' }} />
      <View style={{ flex: 3, backgroundColor: 'yellow' }} />
    </View>
  );
}
 
export default FlexDimensionsBasics;

这段代码展示了如何在React Native中使用flexbox布局来控制组件的大小。外层的View使用flex: 1来确保它会占据父容器中的所有可用空间。内层的四个View通过分配不同的flex值来设置自己的大小比例，蓝色View占1/6，红色View占2/6，黄色View占3/6。这样，即使屏幕大小或设备不同，组件的相对大小也会保持一致。

React Native 之 Flexbox 布局

评论已关闭

推荐阅读