Layout 被动本机：将视图放置在另一个居中视图下方

我过去经常使用Android相对布局来实现这一点：

 +-----------+ 
 |           |<- parent view
 |           |
 |  +-----+  |
 |  |     | <--- centered 
 |  |     |  |   child view
 |  +-----+  |
 |   [XXX] <---- view positioned
 |           |   bellow centered
 +-----------+   child view

+------------+
||我今天也做了类似的事情：

                <View style={{ flex: 1 }}>
                    <View style={{
                        height: 350, 
                        backgroundColor: "blue"
                    }}>

                    <View style={{
                        backgroundColor: "red", 
                        height: 100, 
                        width: 100, 
                        position: "absolute", 
                        top: "50%", 
                        left: "50%", 
                        marginLeft: -50, // Half the width of this child
                        marginTop: -50 // Half the height of this child
                    }}>
                        <Text>Hello...</Text>
                    </View>

                    <View style={{ 
                        backgroundColor: "green", 
                        height: 30, 
                        width: 100, 
                        position: "absolute", 
                        top: "50%", 
                        left: "50%", 
                        marginLeft: -50, // Half the width of this child
                        marginTop: 70 // This just controls how far down from center this child is
                    }}>
                        <Text>...world</Text>
                    </View>
                </View>


你好
……世界

这确实要求您知道父级中元素的大小，以便正确设置子级上的marginLeft和marginTop值
 我今天做了类似的事情，比如：

                <View style={{ flex: 1 }}>
                    <View style={{
                        height: 350, 
                        backgroundColor: "blue"
                    }}>

                    <View style={{
                        backgroundColor: "red", 
                        height: 100, 
                        width: 100, 
                        position: "absolute", 
                        top: "50%", 
                        left: "50%", 
                        marginLeft: -50, // Half the width of this child
                        marginTop: -50 // Half the height of this child
                    }}>
                        <Text>Hello...</Text>
                    </View>

                    <View style={{ 
                        backgroundColor: "green", 
                        height: 30, 
                        width: 100, 
                        position: "absolute", 
                        top: "50%", 
                        left: "50%", 
                        marginLeft: -50, // Half the width of this child
                        marginTop: 70 // This just controls how far down from center this child is
                    }}>
                        <Text>...world</Text>
                    </View>
                </View>


你好
……世界

这确实要求您知道父级中元素的大小，以便正确设置子级上的marginLeft和marginTop值