Как выровнять по вертикали и горизонтали дочерние компоненты «сверху» родительского компонента в React Native? - PullRequest
Новая
       7

Как выровнять по вертикали и горизонтали дочерние компоненты «сверху» родительского компонента в React Native?

1 голос
/ 21 марта 2020

У меня много проблем с получением двух дочерних компонентов для выравнивания по вертикали и горизонтали "поверх" их родительского элемента в React Native.

Я пытаюсь разместить Loader и Button поверх RTCView.

В настоящее время у меня есть этот JSX, возвращающийся в родительском: 

  if (localStream) {
    return (
      <View style={styles.videoViewWrapper}>
        <RTCView style={styles.android} streamURL={localStream.toURL()} />
        <View
          style={{ justifyContent: 'center', position: 'absolute', }}
        >
          <Loader
            title={callDetails}
          >
          </Loader>
          <Button
            mode="contained"
            style={{ width: 150, margin: 100 }}
            onPress={handleCancelCall}>
            Cancel
          </Button>
        </View>
      </View>
    );
  }

И это внутри Loader: 

Loader = props => {
  return (
    <>
      <StatusBar
        hidden
      />
      <View style={{
        flex: 1,
        alignItems: 'center',
      }}>
        <Text
          style={styles.text}
        >
          {props.title}
        </Text>
        <ProgressBar color={Colors.green800} indeterminate={true} style={{ width: 100, height: 1 }} />
      </View>
    </>
  )
}

const styles = StyleSheet.create({
  text: {
    fontFamily: "Quicksand-Light",
    fontSize: 22,
    textAlign: "center",
    color: "#333333",
    marginBottom: 25,
    justifyContent: 'center',
  }
});

Пока я удалось получить Loader для отображения «сверху» его родителя, я не могу переместить их в верхнюю часть экрана. enter image description here

Любая помощь будет высоко ценится!

1 Ответ

2 голосов
/ 21 марта 2020

Ваше абсолютное позиционированное представление должно охватывать его родителя. Вы можете добиться этого, добавив top: 0, left: 0, right: 0, bottom: 0 к его стилю

Возможно, вам придется отредактировать ваш стиль кнопки. Я удалил его из вашего кода, добавьте его, если вам нужно поле или указанную ширину c. 

<View style={{ justifyContent: 'center', alignItems: 'center', position: 'absolute', top: 0, left: 0, right: 0, bottom: 0 }}>
   <Loader title={callDetails} />
   <Button mode="contained" onPress={handleCancelCall}>Cancel</Button>
</View>
...