放置右上角 react native

Posted 2023-02-22

【中文标题】放置右上角 react native

【英文标题】：Place top right corner react native

【发布时间】：2018-01-24 09:18:40

【问题描述】：

父component有如下样式

const styles = StyleSheet.create(
  container: 
    flex: 1,
    backgroundColor: '#FFF',
    alignItems: 'center',
    justifyContent: 'center',
  ,
);

我在这个组件中放置了另一个component。我想要它在右上角。

当然，我会在这个孩子component中采用以下风格：

const styles = StyleSheet.create(
  container: 
    ...StyleSheet.absoluteFillObject,
    top: 20,
    right: 5,
  ,
);

但是，它将其放置在左上角。我可以将它移到右上角的唯一方法是将right: 5 替换为left: 500。但这不是要走的路……

【问题讨论】：

如何使用alignSelf: 'flex-end'

同时删除 css 和样式表标签，因为它没有帮助，否则您将获得 css 解决方案

@JigarShah 已删除。这有帮助。它向右移动。但是，现在横向来说它在中间。

那是因为你有 justifyContent: 'center', 。你可以使用margin-top来改变水平位置

【参考方案1】：

请查看以下子组件样式表：

const styles = StyleSheet.create(
  container: 
    ...StyleSheet.absoluteFillObject,
    alignSelf: 'flex-end',
    marginTop: -5,
    position: 'absolute', // add if dont work with above
  
);