Question

I have tinder like cards that can be swiped left and right out of screen, but they render below the navigation bar, is there anyway to re-order the index here? My code is setup quite standard, so by logic the bar would always be on top - i think? cant think of anyway around it

renderScene(route, nav) {
    const {globalNav} = nav.props;
    switch (route.name) {
        case 'settings' :
            return <Settings />;

        case 'feed' :
            return <Feed />;

        case 'matches' :
            return <Matches />;
    }
}

render() {
    const {globalNav} = this.props;
    return (
        <Navigator
            renderScene={this.renderScene}
            navigationBar={ <Navigator.NavigationBar routeMapper={NavigationBar} />}
        />
    );
}

see screen shot

Answer 1

zIndex布局属性对我有用！

来自Layout Props Description

zIndex控制哪些组件显示在其他组件之上。一般，   你没有使用zIndex。组件根据其顺序呈现   文档树，所以后面的组件绘制早期的组件。用zIndex   如果你有动画或自定义模态接口，可能会有用   你不想要这种行为。

它的工作方式类似于CSS z-index属性 - 具有更大的组件   zIndex将呈现在顶部。想象它指向的z方向   从手机到你的眼球。看到   https://developer.mozilla.org/en-US/docs/Web/CSS/z-index了解更多信息   的信息。

z-index of navigation bar in react-native

1 个答案: