Question

RN 0.57，反应路由器通量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>

我在HTTP REQ之前更改了状态dispatch(setIsloading(true))，并在它从服务器返回JSON之后更改了状态dispatch(setIsloading(false))，然后将其更改为新的场景。

问题在于，第一个可见模态是正确的颜色和透明的，但是在下一个场景中，颜色变得越来越暗，就像该组件在下一个场景中显示多次，之后又显示了三倍。

strong>

任何想法导致此问题的原因是什么

Answer 1

由于这些任务是异步的，因此必须确保在移至下一个场景之前已消除模态，在这种情况下，您要在解除此模态之前移至下一个场景，并且一旦进入下一个场景，所有异步订阅已删除，因此您的模式不会消失。

我要加载模态是通过引用来完成的

在我的加载组件中

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}/>

以及您想要显示加载程序的方法中的

this.loader.show()

并通过调用将其隐藏

this.loader.hide()

与backgroundReact Native Modal透明反应在场景之间黑色不透明度0.5变暗

1 个答案: