React Native Modal прозрачный с backgroundColor черный непрозрачность 0,5 становятся темнее между сценами - PullRequest
Новая
       43

React Native Modal прозрачный с backgroundColor черный непрозрачность 0,5 становятся темнее между сценами

0 голосов
/ 14 ноября 2018

RN 0,57, поток React router 4

У меня есть компонент загрузчика для отображения сообщения о загрузке в модальном режиме на каждой сцене.Я устанавливаю модальное значение transparent и для модального содержимого устанавливаю backgroundColor: 'rgba(0, 0, 0, 0.5)'

Это код компонента: 

<Modal
    transparent
    visible={this.props.visible}
    onRequestClose={() => {
        console.log('modal closed')
    }}
>
    <View style={styles.modalBackground}>
        .....
    </View>
</Modal>

Это таблица стилей: 

modalBackground: {
    flex: 1,
    alignItems: 'center',
    flexDirection: 'column',
    justifyContent: 'space-around',
    backgroundColor: 'rgba(0, 0, 0, 0.5)'
},

Здесь должен отображаться компонент загрузчика: 

<View style={{flex:1}}>
    <Loader
        visible={this.props.global.isLoading}
        animating={this.props.global.isLoading}
    />
    ......
</View>

Я меняю состояние dispatch(setIsloading(true)) до HTTP REQ и dispatch(setIsloading(false)) после того, как оно возвращает JSON с сервера, затем оно изменяется на новую сцену.

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

Любая идея В чем причина этой проблемы?

1 Ответ

0 голосов
/ 14 ноября 2018

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

Что я делаю для загрузки модалов, так это то, что я делаю это по ссылкам

В моем компоненте загрузки 

export default class Loader extends Component{
  hide = () => {
           this.setState=({visible:false})
  }
  show = () => {
    this.setState=({visible:true})
  }
  render(){
     return(
          <Modal isVisible={this.state.visible}>
              ....
          </Modal>
      )
   }
}

где вы хотите показать Loader 

import Loader from 'path/to/loader'
<Loader ref={r=>this.loader = r}/>

и в ваших методах, когда вы хотите показать loader 

this.loader.show()

и скрыть его, позвонив по номеру 

this.loader.hide()
...