如何在 React Native 中垂直和水平对齐父组件“顶部”的子组件？

Question

我在让两个子组件在 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在其父级的“顶部”显示，但我无法将它们移动到屏幕顶部的位置。

Answer 1

您的绝对定位视图需要覆盖其父级。您可以通过添加top: 0, left: 0, right: 0, bottom: 0其样式来实现此目的您可能需要编辑 Button 样式。我从您的代码中删除了它，如果您需要边距或特定宽度，请添加它。<View style={{ justifyContent: 'center', alignItems: 'center', position: 'absolute', top: 0, left: 0, right: 0, bottom: 0 }}>&nbsp; &nbsp;<Loader title={callDetails} />&nbsp; &nbsp;<Button mode="contained" onPress={handleCancelCall}>Cancel</Button></View>