在React Native中将元素置于右上角

Question

父组件具有以下样式

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

我正在这个组件中放置另一个组件。我想把它放在右上角。

自然地，我会在这个子组件中采用以下样式：

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

然而，它将其放在左上角。唯一的方法是用 left: 500 替换 right: 5，才能将其移动到右上角。但这不太合适...

- four-eyes

---

使用alignSelf: 'flex-end'怎么样？ - Jigar Shah

同时删除CSS和样式表标签，因为这不会有帮助，或者您将获得CSS解决方案。 - Jigar Shah

@JigarShah已删除。这很有帮助。它把它移到了右边。然而，就水平方向而言，它现在处于中间位置。 - four-eyes

这是因为你使用了 justifyContent: 'center'。你可以使用 margin-top 来改变水平位置。 - Jigar Shah

Answer 1

请检查以下子组件的样式表：

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

- Jigar Shah