UYOU
2022-05-26 10:15:45
我在讓兩個(gè)子組件在 React Native 中垂直和水平對(duì)齊其父元素的“頂部”時(shí)遇到了很多麻煩。我正在嘗試將Loader和Button放在RTCView.我目前有這個(gè) JSX 在父級(jí)中返回: 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', }});雖然我已經(jīng)實(shí)現(xiàn)了Loader在其父級(jí)的“頂部”顯示,但我無法將它們移動(dòng)到屏幕頂部的位置。
1 回答
富國(guó)滬深
TA貢獻(xiàn)1790條經(jīng)驗(yàn) 獲得超9個(gè)贊
您的絕對(duì)定位視圖需要覆蓋其父級(jí)。您可以通過添加top: 0, left: 0, right: 0, bottom: 0其樣式來實(shí)現(xiàn)此目的
您可能需要編輯 Button 樣式。我從您的代碼中刪除了它,如果您需要邊距或特定寬度,請(qǐng)?zhí)砑铀?/p>
<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>
添加回答
舉報(bào)
0/150
提交
取消
