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

我试图在特定位置（基于某些计算）渲染父组件内部的多个组件。给出垂直位置的计算看起来是正确的，但组件没有显示在它们应该显示的位置。我尝试了绝对窗口位置和相对组件位置，但都没有成功

父对象如下所示：

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>
  );
};

const-top=170；
const-bottom=10；
常数左=10；
常数右=10；
const styles=StyleSheet.create({
网格：{
弹性：1，
位置：'绝对'，
顶:顶,，
高度：尺寸。获取（“窗口”）。高度-顶部-底部，
宽度：尺寸。获取（'window'）。宽度-左-右，
borderLeftColor:'黑色'，
borderLeftWidth:1，
borderBottomColor:'黑色'，
边框宽度：1
}
});
const DrawGrid:React.FC=（{maxDistance，elements}）=>{
const[gridSize，setGridSize]=useState（）；
返回(
{
setGridSize（event.nativeEvent.layout）；
}}>
{elements.map（（元素，索引）=>{
返回(
)
})}
);
};

呈现所有元素的子组件如下所示：

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>
  );
};

const-top=170；
const-bottom=20；
常数左=10；
常数右=10；
const styles=StyleSheet.create({
元素容器：{
borderLeftColor:'红色'，
borderLeftWidth:1，
borderTopColor:'红色'，
边框宽度：1，
borderRightColor:'红色'，
borderRightWidth:1，
borderBottomColor:'红色'，
边界宽度：1，
边界半径：5，
填充：2，
位置：'相对'，
alignSelf:“灵活启动”
}
});
const getVerticalPosition=（someDistance:number，maxDistance:number，height:number）=>{
如果（！someDistance | |！maxDistance）返回{top:0}；
常量topDistance=（1-（someDistance/maxDistance））*高度；
返回{top:topDistance}；
};
const-paureElement:React.FC=（{maxDistance，element，gridSize，index}）=>{
const styleVertical=getVerticalPosition（someDistance、maxDistance、gridSize.height）；
返回(
top:{styleVertical.top.toFixed（2）}
);
};

我可以看到

getVerticalPosition

如何返回正确的值，但元素从未位于预期的位置。在下面的快照中，我正在打印每个元素的最大值，我们可以看到它根本不受尊重。（水平位置超出问题范围）

---

我的第一个想法是，我不知怎么搞砸了样式，我还尝试给每个元素一个不同的

zindex

。你知道会发生什么吗？任何帮助都将不胜感激，谢谢

我想您不明白React Native中的布局类型是如何工作的。这里有一个链接：。主要问题是每个子元素相对于其自身初始位置的相对位置

默认情况下，React Native中的所有元素的

位置

都等于

相对

，因此不需要将其放入样式定义中

<> >为了更好地理解<代码>相关< /Cord>位置方案，建议您将其绘制过程分为两个步骤：

渲染没有任何

上、左、下、右属性的子对象
根据孩子的
上、左、下、右属性从当前位置移动孩子
假设您有这样的代码：

<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,
  },
});


const styles=StyleSheet.create({
家长：{
前100名，
弹性：1，
},
第一个孩子：{
前100名，
身高：50，
},
第二个孩子：{
排名：80，
身高：70，
},
});

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


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

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