Добавить подвид в реагировать родной

Question

Я новичок, чтобы реагировать на нативный и CSS в целом, и я изо всех сил пытаюсь добавить представление, которое отображается поверх другого.

TL; DR: текст должен отображаться в виде заголовка на виде сверху. Круги - это только фон. Игровая площадка с моим кодом находится в https://snack.expo.io/ryhODGSLU

Это макет, который я пытаюсь реализовать:

---

Что я пробовал:

Я создал компонент:

class CirclesBackground extends Component {
  render() {
    return (
      <View style={styles.container}>
        <View style={styles.middleCircle}/>
        <View style={styles.topCircle}/>
      </View>
    );
  }
}

Вверху я хочу отобразить текст:

class Title extends Component {
  render() {
    return (
      <Text style={styles.titleText}>{this.props.text}</Text>
    );
  }
}

Мое приложение помещает компонент Title внутрь компонента CirclesBackground:

export default function App() {
  return (
      <CirclesBackground>
        <Title text="Know when to go outside!"></Title>
      </CirclesBackground>
  );
}

Проблема ??

Текст (Title компонент) не отображается. Круги отображаются правильно.

Я уже пробовал использовать position: "absolute" и zIndex: 5, как рекомендовано в В React Native, как мне посмотреть на наверху другого вида, часть которого лежит за пределами вида позади? , но это не решило проблему.

Может кто-то увидеть, что я делаю неправильно?

---

Стили, которые я использую:

const styles = StyleSheet.create({
  container: {
    flex: 1,
    flexDirection: 'column',
    justifyContent: 'center',
    alignItems: 'center',
  },
  titleText: {
    fontSize: 28,
    textAlign: 'center',
    position: 'absolute',
    color: 'red',
    top: 100,
  },
  middleCircle: {
    overflow: 'hidden',
    width : 180,
    height:300,
    position : 'absolute',
    right: 0,
    borderTopLeftRadius:230,
    borderBottomLeftRadius: 230,
    backgroundColor:'#F1E800',
    opacity: 0.4
  },
  topCircle: {
    overflow: 'hidden',
    width : 90,
    height:100,
    position : 'absolute',
    top: 0,
    left: 0,
    borderBottomRightRadius: 80,
    backgroundColor:'#F1E800',
    opacity: 0.4
  }
});

А вот ссылка на игровую площадку: https://snack.expo.io/ryhODGSLU

Answer 1

Как быстрое решение, вы можете передать свой Title компонент в качестве дочернего реквизита на CirclesBackground, как показано ниже

class CirclesBackground extends Component {
  render() {
    return (
      <View style={styles.container}>
        <View style={styles.middleCircle} />
        {this.props.children}
      </View>
    );
  }
}

Теперь вы можете передать свой Title компонент

<CirclesBackground>
  <Title text="Know when to go outside!"></Title>
</CirclesBackground>

Возможно, это не оптимальное решение.

Надеюсь, это поможет вам. Не стесняйтесь сомнений.