Блог

Я пытаюсь загрузить компонент поверх другого. В моей демо-версии у меня есть два экрана, которые условно отображаются с помощью кнопки слайдера(я бы использовал простую текстовую кнопку, но я хочу убедиться, что анимация работает). Экран 1-это просто серый экран, а экран 2-это экран отображаемых карт react native.

Я бы хотел, чтобы кнопка ползунка находилась в верхней части карты. Мне нужно, чтобы карта была на всю страницу. Первоначально я пытался использовать zIndex, но это не работает.

У меня здесь есть рабочая демонстрация

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>
      );
    }
 }
 }
 
 

Вы можете использовать View с position: absolute , чтобы обернуть кнопки ползунка.

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

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