如何在弹性框容器中混合固定和动态大小的元素

Question

我正在尝试创建一个利用flexbox自动调整大小但还包含固定大小项目的布局：

<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 布局中包含固定大小的项目，不应使用宽度/高度，而应使用 flex： 0 和 flexBasis。这种方法最初对我不起作用，因为包装我的组件的组件大小不正确并且弄乱了 flex 渲染。flexBasis 在设置为绝对数字时似乎是与密度无关的像素。

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}>{"LeftnText"}</Text>
          <View style={styles.view} />
          <Text style={styles.text2}>Test</Text>
        </View>
        <View style={styles.container}>
          <Text style={styles.text1}>{"LeftnText"}</Text>
          <View style={styles.view} />
          <Text style={styles.text2}>Test</Text>
        </View>
        <View style={styles.container}>
          <Text style={styles.text1}>{"LeftnText"}</Text>
          <View style={styles.view} />
          <Text style={styles.text2}>Test</Text>
        </View>
        <Text>Test</Text>
        <View style={styles.container}>
          <Text style={styles.text1}>{"LeftnText"}</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,
  }
});