Question

React native不允许zIndex，而是建议根据他们渲染的顺序对视图进行分层。我的屏幕上半部分有一个模块，底部有一个模块，我想要顶部的模块有一个与底部重叠的阴影。为了实现这一点，我必须首先渲染下半部分。足够容易，绝对定位对吗？

我的反应风格：

topContainer: {
    position: 'absolute',
    top: 0,
    left: 0, 
    right: 0,
    height: 200,
    backgroundColor: '#cccccc',
    shadowColor: "#000000",
    shadowRadius: 10,
    shadowOpacity: 0.5,
    shadowOffset: {
      h: 0,
      w: 0
    },
},
bottomContainer: {
    position: 'absolute',
    top: 100,
    left: 0,
    right: 0,
    bottom: 0,
    backgroundColor: '#333'
}

我的JSX：

<View>
    <View style={styles.bottomContainer}>
        <ContentView results={this.state.results} />
    </View>
    <View style={styles.topContainer}>
        <SearchBar onSearch={this.onSearch} />
    </View>
</View>

但是当我这样做时，bottomContainer不会填满屏幕，它符合其内容。但由于屏幕尺寸的多样性，我无法为高度设置明确的像素大小，因此卡住了。

Answer 1

你可以使用interface Base {} interface Child extends Base {} interface Base2 extends Base {} // This class implements Child, which extends Base. So this will meet either requirement. class Class1 implements Child {} // This class implements Base2, which extends Base. // So this will meet any Base requirement, but NOT a Child requirement class Class2 implements Base2 {} class BaseService { /** * Problem! We are requiring Base here, but then we pass the same argument to * ChildService->process, which requires Child. * * 1) Class1 WILL work, since it implements Child which extends Base. * * 2) Class2 WILL NOT work. Or at least, we can't pass it to ChildService->process * since it only implements Base2 which extends Base. It doesn't implement Child, * therefore ChildService->process won't accept it. */ public function process(Base $base) { $childService = new ChildService($base); return $childService->process($base); } } class ChildService { /** * I will ONLY receive an instance that implements Child. * Class1 will work, but not Class2. */ public function process(Child $child) { return $child->getId(); } } $service = new BaseService(); // I can do this! I'm passing in Child1, which implements Child, which extends Base. // So it fulfills the initial Base requirement, and the secondary Child requirement. $service->process(new Child1()); // I can't do this. While BaseService will initially accept it, ChildService will refuse // it because this doesn't implement the Child interface as required. $service->process(new Child2());属性，这是一个仅限android的功能，它可以做你想要的。

属性说明：

海拔数

（仅限Android）使用Android设置视图的高程   底层提升API。这会为项目添加阴影和   影响重叠视图的z顺序。仅在Android 5.0+上受支持，   对早期版本没有影响。

参考：https://facebook.github.io/react-native/docs/view.html

如何使用绝对定位而不是flex来布局视图？

1 个答案: