努力使用 zIndex 来订购视图

Question

我正在尝试在另一个组件之上加载一个组件。在我的演示中，我有两个使用滑块按钮有条件地呈现的屏幕（我会使用一个简单的文本按钮，但我想确保动画有效）。屏幕 1 只是一个灰色屏幕，屏幕 2 是正在渲染的 React Native 地图屏幕。

我希望滑块按钮位于地图顶部。我需要地图是整页的。最初我尝试使用 zIndex 但它不起作用。

我有一个工作演示 here

App.js

export default class Home extends React.Component {
 
  constructor(props) {
    super(props)
    this.state ={
      visible: true,
      whichComponentToShow: 'Screen1'
    };
}

goToMap = () => {
  this.setState({whichComponentToShow: 'Screen2'})
}
goToList = () => {
  this.setState({whichComponentToShow: 'Screen1'})
}

  render(){

    const SliderRender = (
      <Slider
        renderMap={this.goToMap.bind(this)}
          renderList={this.goToList.bind(this)}
          key="slider"
          style={{zIndex: 10}}
         />
      );
    
     if(this.state.whichComponentToShow === 'Screen1'){
      return(
       <View style={{backgroundColor: '#d1cfcf' ,flex: 1}}>  
        
        {SliderRender}

          <ListHome
            renderMap={this.goToMap.bind(this)}
            renderList={this.goToList.bind(this)}
          />
        </View>
      );
    }
    else if(this.state.whichComponentToShow === 'Screen2'){
      return(
       <View style={{backgroundColor: '#d1cfcf' ,flex: 1}}>

        <MapHome
          renderMap={this.goToMap.bind(this)}
          renderList={this.goToList.bind(this)}
          
        />

        {SliderRender}
 
       </View>
      );
    }
 }
 }

Answer 1

您可以使用 View 和 position: absolute 来包装滑块按钮。

render() {
  const { whichComponentToShow } = this.state;

  return(
    <View style={{backgroundColor: '#d1cfcf' ,flex: 1}}>
      {whichComponentToShow === 'Screen1' && <ListHome />}
      {whichComponentToShow === 'Screen2' && <MapHome />}
      <View style={{position: 'absolute', top: 0, left: 0, right: 0}}>
        <Slider
          renderMap={this.goToMap}
          renderList={this.goToList}
        />
      </View>
    </View>
  );
}

努力使用 zIndex 来订购视图

Struggling using zIndex to order views

reactjs

react-native

react-native-maps