如何在 react-native 的父组件内部的特定位置显示多个组件？答案

【问题标题】：How to show multiple components in a specific position inside of a parent component in react-native?如何在 react-native 的父组件内部的特定位置显示多个组件？
【发布时间】：2020-11-13 22:25:27
【问题描述】：

我正在尝试在特定位置（基于一些计算）呈现父组件内的多个组件。给我垂直位置的计算看起来是正确的，但组件没有显示在他们应该的位置。我已经尝试了绝对窗口位置和相对组件位置，但没有运气。

父级如下所示：

const top = 170;
const bottom = 10;
const left = 10;
const right = 10;

const styles = StyleSheet.create({
  grid: {
    flex: 1,
    position: 'absolute',
    top: top,
    height: Dimensions.get('window').height - top - bottom,
    width: Dimensions.get('window').width - left - right,
    borderLeftColor: 'black',
    borderLeftWidth: 1,
    borderBottomColor: 'black',
    borderBottomWidth: 1
  }
});

const DrawGrid: React.FC<IDrawGrid> = ({ maxDistance, elements }) => {
  const [gridSize, setGridSize] = useState<LayoutRectangle>();

  return (
    <View style={styles.grid} onLayout={(event) => {
      setGridSize(event.nativeEvent.layout);
    }}>
      {elements.map((element, index) => {
        return (
          <DrawElement element={element} maxDistance={maxDistance} gridSize={gridSize} index={index * 2} />
        )
      })}
    </View>
  );
};

渲染所有元素的子组件如下所示：

const top = 170;
const bottom = 20;
const left = 10;
const right = 10;

const styles = StyleSheet.create({
  elementContainer: {
    borderLeftColor: 'red',
    borderLeftWidth: 1,
    borderTopColor: 'red',
    borderTopWidth: 1,
    borderRightColor: 'red',
    borderRightWidth: 1,
    borderBottomColor: 'red',
    borderBottomWidth: 1,
    borderRadius: 5,
    padding: 2,
    position: 'relative',
    alignSelf: 'flex-start'
  }
});

const getVerticalPosition = (someDistance: number, maxDistance: number, height: number) => {
  if (!someDistance || !maxDistance) return { top: 0 };

  const topDistance = (1 - (someDistance / maxDistance)) * height;
  return { top: topDistance };
};

const DrawElement: React.FC<IDrawElement> = ({ maxDistance, element, gridSize, index }) => {
  const styleVertical = getVerticalPosition(someDistance, maxDistance, gridSize.height);

  return (
    <View key={key} style={[styles.elementContainer, styleVertical]}>
      <Text>top: {styleVertical.top.toFixed(2)}</Text>
    </View>
  );
};

我可以看到getVerticalPosition 如何返回正确的值，但该元素永远不会位于预期的位置。在下面的快照中，我正在打印每个元素的最高值，我们可以看到它根本没有受到尊重。（水平位置不在问题范围内）我的第一个想法是我以某种方式弄乱了样式，我还尝试在没有运气的情况下为每个元素赋予不同的zindex。任何想法会发生什么？任何帮助将不胜感激，谢谢！

【问题讨论】：

您能提供一些视觉示例吗？或者在代码沙箱中提供交互示例。
我刚刚上传了我在设备上看到的快照，对此感到抱歉
我真的不明白你为什么要设置 alignSelf 和相对位置。我会取消 alignSelf 并将位置设置为绝对。
alignSelf 有助于使组件与其内容一样大。如果我将其删除，则垂直定位组件的问题不会得到解决。我使用相对位置，因为我希望将孩子放置在相对于父母的位置。我也试过计算绝对位置，但这也不能解决问题......

标签： javascript reactjs typescript react-native

【解决方案1】：

我想你不明白布局类型在 React Native 中是如何工作的。这是一个链接：https://reactnative.dev/docs/flexbox#absolute--relative-layout。主要问题是每个子元素的relative 位置与其自己的初始位置相关。

默认情况下，React Native 中的所有元素都有position 等于relative，所以你不需要把它放在样式定义中。

为了更好地理解relative位置方案，我建议你分两步考虑它的渲染过程：

渲染没有任何top, left, bottom, right 属性的孩子；
根据top, left, bottom, right 属性从当前位置转移子级；

想象一下你有这样的代码：

<View style={styles.parent}>
  <View style={styles.firstChild}/>
  <View style={styles.secondChild}/>
</View>

const styles = StyleSheet.create({
  parent: {
    top: 100,
    flex: 1,
  },
  firstChild: {
    top: 100,
    height: 50,
  },
  secondChild: {
    top: 80,
    height: 70,
  },
});

如果我们将上面提到的两个步骤应用于此示例，它将如下所示：

要解决您的问题，您需要将absolute 位置方案应用于儿童。只有absolute 位置方案放置元素，例如top: 100 属性，相对于其父元素的当前顶部向下100 点。

希望对你有所帮助。

【讨论】：