我在让两个子组件在 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
在其父级的“顶部”显示,但我无法将它们移动到屏幕顶部的位置。
任何帮助将非常感激!