wenn Modal zu verbergen gesetzt ist, wird in der Statusleiste

Question

flackert

hier ist Code: und ich möchte wissen, ob es ein Problem ist? oder ob es ein universelles Phänomen ist.

'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; 

Umgebung:
reagieren native Version: 0.40
Android-Version: 7.1.1
die gif alles erklären, und dieses Phänomen verwirrt mich, ob soll ich Modal Komponente weiter verwenden.

Answer 1

dieses Problem in RN Fest 0.45 finden Sie in den Release doc enter link description here

Fehler behoben.

Answer 2

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