Question

我正在尝试创建一个使用flexbox＆＃39;自动调整大小但也包含固定大小的项目：

<View style={{ height: 70, alignItems: "center" }}>
    <Text style={{ flex: 1, textAlign: "right", paddingRight: 10 }}>left text</Text>
    <Image style={{ width: 70, height: 70 }} src={require('./img.png')} />
    <Text style={{ flex: 1, textAlign: "left", paddingLeft: 10 }}>right text</Text>
</View>

我希望图像在UI中居中，并使文本视图同样占用剩余的宽度。实际结果是其中一个文本视图比另一个大，就好像渲染没有考虑图像视图的宽度一样。

Answer 1

终于找到了正确的方法。要在flex布局中使用固定大小的项目，不应使用width / height但是flex：0和flexBasis。这种方法最初对我不起作用，因为包裹我的组件的组件没有正确调整大小并与flex渲染混乱。当flexBasis设置为绝对数时，它似乎是与密度无关的像素。

Proof of concept on expo.io

import React, { Component } from 'react';
import { Text, View, StyleSheet } from 'react-native';
import { Constants } from 'expo';

export default class App extends Component {
  render() {
    return (
      <View>
        <Text>Test</Text>
        <View style={styles.container}>
          <Text style={styles.text1}>{"Left\nText"}</Text>
          <View style={styles.view} />
          <Text style={styles.text2}>Test</Text>
        </View>
        <View style={styles.container}>
          <Text style={styles.text1}>{"Left\nText"}</Text>
          <View style={styles.view} />
          <Text style={styles.text2}>Test</Text>
        </View>
        <View style={styles.container}>
          <Text style={styles.text1}>{"Left\nText"}</Text>
          <View style={styles.view} />
          <Text style={styles.text2}>Test</Text>
        </View>
        <Text>Test</Text>
        <View style={styles.container}>
          <Text style={styles.text1}>{"Left\nText"}</Text>
          <View style={styles.view} />
          <Text style={styles.text2}>Test</Text>
        </View>
      </View>
    );
  }
}

const styles = StyleSheet.create({
  container: {
    flexDirection: "row",
    alignItems: 'center',
    justifyContent: 'center',
    paddingTop: Constants.statusBarHeight,
    backgroundColor: '#ecf0f1',
  },
  view: {
    flex: 0,
    flexBasis: 50,
    height: 50,
    backgroundColor: "red",
  },
  text1: {
    flex: 1,
    textAlign: "right",
    paddingRight: 10,
  },
  text2: {
    flex: 1,
    textAlign: "left",
    paddingLeft: 10,
  }
});

如何在弹性箱容器中混合固定和动态尺寸元素？

1 个答案: