Reactive Native：将视图放在另一个居中视图旁边

Question

我曾经使用Android相对布局做了很多事情：

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

是否有可能在反应原生中实现相同的目标？

Answer 1

我今天做了类似的事情：

                <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值。