当Modal设置为隐藏时，状态栏将闪烁

Question

这里是代码：我想知道它是否是一个问题？或者，这是否是普遍现象。

'use strict';
import React, {Component} from 'react';
import {
    View,
    Text,
    StyleSheet,
    TouchableOpacity,
    Modal
} from 'react-native';

import NavActivity from '../components/NavActivity';

class TestPage extends Component {
    constructor(props) {
        super(props);
        this.state = {
            modalVisible: false
        }
    }

    _setModalVisible(param) {
        this.setState({modalVisible: param});
    }

    render() {
        return (
            <View style={Styles.wrap}>
                <NavActivity
                    navigator={this.props.navigator}
                    title={{
                        title: '测试页面'
                    }}/>
                <TouchableOpacity
                    onPress={() => this.setState({modalVisible: true})}>
                    <Text>show modal</Text>
                </TouchableOpacity>
                <Modal
                    animationType={'fade'}
                    transparent={true}
                    visible={this.state.modalVisible}
                    onRequestClose={() => {
                        this._setModalVisible(false)
                    }}>
                    <View style={Styles.container}>
                        <Text>Modal!!!</Text>
                    </View>
                </Modal>
            </View>
        )
    }
}

const Styles = StyleSheet.create({
    wrap: {
        flex: 1,
        flexDirection: 'column',
        justifyContent: 'flex-start',
        alignItems: 'center',
    },
    container: {
        position: 'absolute',
        top: 0,
        left: 0,
        right: 0,
        bottom: 0,
        flexDirection: 'column',
        justifyContent: 'center',
        alignItems: 'center',
        backgroundColor: 'rgba(0,0,0,0.7)'
    },
});

export default TestPage;

环境：
反应原生版本：0.40
android版本：7.1.1
gif解释了一切，这种现象让我感到困惑，我是否应该继续使用Modal组件。

Answer 1

Use This 'react-native-modal' library.





import React, { Component } from 'react'
import { Text, TouchableOpacity, View } from 'react-native'
import Modal from 'react-native-modal'

export default class ModalTester extends Component {
  state = {
    isModalVisible: false
  }

  _showModal = () => this.setState({ isModalVisible: true })

  _hideModal = () => this.setState({ isModalVisible: false })

  render () {
    return (
      <View style={{ flex: 1 }}>
        <TouchableOpacity onPress={this._showModal}>
         <Text>Show Modal</Text>
        </TouchableOpacity>
        <Modal isVisible={this.state.isModalVisible}>
          <View style={{ flex: 1 }}>
            <Text>Hello!</Text>
          </View>
        </Modal>
      </View>
    )
  }

}





For more docs read from here:-
https://github.com/react-native-community/react-native-modal

Answer 2

此问题已在RN 0.45中修复，请参阅发布文档enter link description here

修复了错误。