来自不同组件的 React Native 开放模式

Question

我是反应原生的新手，我有 2 个 js 文件（组件）。文件的 1 是模态 jsx，我想从其他 js 文件中打开这个模态。

模态 JS 文件

import React, {Component} from 'react';
import {    Platform, Text,View, StyleSheet, TouchableOpacity} from 'react-native';
import Modal from 'react-native-modal';
import {    Icon,
            Picker,
            Form,
            Item,
            Button,
            Input} from 'native-base';

export default class MyPopup extends Component{ 
     state = {
        isModalVisible: this.props.isModalVisible
      };
      constructor(){
        super(); 
      }    
  render() {
    return (
        <View style={styles.container}>  
          <Modal isModalVisible={true}>
              onRequestClose={() => this.closeModal()}>

              <View style={styles.headerContent}>
                <View style={styles.headerItems}>
                    <Icon name='md-grid' />
                    <Text style={styles.headerText}>Version Mail</Text>
                </View>
              </View>   

              <View style={styles.modalContainer}>
                 <View style={styles.titleRow}>
                    <View style={styles.titleText}>
                        <Text>Book:</Text>
                        <Text> MAIN Reader</Text>
                    </View>
                    <View style={styles.titleTableText}>
                        <Text>Version:</Text>
                        <Text> T12345 User</Text>
                    </View>
                 </View>

                 <View style={styles.lineDiv}/>    

                 <View style={styles.titleText}>
                    <View style={styles.itemMarginAlone}>
                        <Text>Server</Text>                    
                        <View style={{flexDirection:'row'}}>
                                <Icon active name='person'/>
                                <Picker mode="dropdown" style={{width:350}}>
                                    <Item label="User_1" value="key0" />
                                    <Item label="User_2" value="key1" />
                                    <Item label="User_3" value="key2" />
                                    <Item label="User_4" value="key3" />
                                    <Item label="User_5" value="key4" />
                                </Picker> 
                        </View>                                   
                    </View>
                    <View>
                        <Text>Notes</Text> 
                        <Item  style={{width:350}}>
                            <Icon active name='clipboard' />
                            <Input placeholder='Notes...'/>
                        </Item>                                  
                    </View>                    
                </View>

                <View style={styles.titleText}>
                    <View style={styles.itemMarginAlone}>
                            <Text>Guests</Text>   
                            <View style={styles.titleText}>                 
                                <Button bordered style={styles.btnGuest}>
                                    <Text>1</Text>
                                </Button>   
                                <Button bordered style={styles.btnGuest}>
                                    <Text>2</Text>
                                </Button>  
                                <Button bordered style={styles.btnGuest}>
                                    <Text>3</Text>
                                </Button>  
                                <Button bordered style={styles.btnGuest}>
                                    <Text>4</Text>
                                </Button>  
                                <Button bordered style={styles.btnGuest}>
                                    <Text>5</Text>
                                </Button>  
                                <Button bordered style={styles.btnGuest}>
                                    <Text>6</Text>
                                </Button>
                                <Button bordered style={styles.btnGuest}>
                                    <Text>7</Text>
                                </Button>
                                <Button bordered style={styles.btnGuest}>
                                    <Text>8</Text>
                                </Button>    
                                <Button bordered style={styles.btnGuest}>
                                    <Text>+</Text>
                                </Button>                              
                            </View>                         
                    </View>
                </View>

                <View style={styles.lineDiv}/>

                <View style={styles.btnAction}> 
                    <Button warning style={styles.btnAlign}><Text style={styles.btnAlign}> Submit</Text>
                    <Icon active name='keypad' /></Button>                  

                    <Button warning style={styles.btnAlign}><Text style={styles.btnAlign}> Close</Text>
                    <Icon active name='keypad' /></Button> 

                </View>


            </View>

          </Modal>

        </View>
    );
  }
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    backgroundColor: 'green', 
  },
  modalContainer: { 
    backgroundColor: 'white',
  },
  innerContainer: {
    alignItems: 'flex-end',
  },
  headerContent:{ 
    height: 55,
    backgroundColor: '#f7b50c',
  },
  txtFont:{
    fontSize:12,
  },
  headerItems:{
    margin:10,
    flex: 1, 
    flexDirection:'row',
  },
  headerText:{
    margin : 5,
    fontSize:18,
  },
  titleRow:{
    margin :8,
    flexDirection : 'row',
    justifyContent: 'space-between',
  },
  titleText:{
    margin :8,
    flexDirection : 'row',
  },
  titleTableText:{
    margin :8,
    flexDirection : 'row',

  },
  lineDiv:{
      borderBottomColor: 'grey',
      borderBottomWidth: 1.5,
      margin: 10,
  },
  itemMarginAlone:{
      margin:10,
  },
  btnAlign:{
    margin:15,
  },
  btnGuest:{
      width: 55,
      margin:8,
      justifyContent:'center',
  },
  btnAction:{
    flexDirection: 'row',
    justifyContent: 'flex-end',
  }

});

调用Js文件 主页 JS 文件

导入后我将如何调用此弹出窗口。我的弹出窗口是组件，我需要在从第一次单击我的主页 js 按钮时撤销它

提前致谢

Answer 1

您的MyPopup 正在使用this.props.isModalVisible 来判断组件的可见性。您可以使用该属性来决定可见性。

示例

export default class MyPopup extends React.Component {
  ...
  render() {
    const { isModalVisible } = this.props;
    return (
      isModalVisible &&
        <View style={styles.container}>
          ...
        </View>
    );
  }
}

使用它

...
import MyPopup from '...'
...
class Home extends React.Component {
  ...
  render() {
    return(
      ...
      <MyPopup isModalVisible={MODAL_VISIBILITY_PREDICATE} />
      ...
    )
  }
}

希望这会有所帮助！

Answer 2

我也需要这种模态。通过使用您的代码和研究，我尝试创建可重用的模型。
如有任何建议，请在下方发表评论。

    export default class ImageModel extends Component {
    constructor(props) {
            super(props);
      }  
      
    render() {
    const visbility=this.props;
    
    return (
        
        <Modal animationType={"slide"} transparent={false}
          visible={this.props.visbility}
          onRequestClose={() => { console.log("Modal has been closed.") }}>

          <View style={styles.modal}>
            <Image
              style={{ width: '100%', height: 200, resizeMode: 'stretch' }}
              source={{ uri: 'https://4.bp.blogspot.com/-krdeTqQLML8/Wyf2oV7eedI/AAAAAAAABpI/OZ759swV7L8wWtt2pwBXIgp6aPz33r01gCLcBGAs/s400/fist%2Bapp.jpg' }}
            />
            <Text style={styles.text}> Javascript Tutorial With Example</Text>

            <TouchableHighlight style={styles.touchableButton}
              onPress={() => { this.props.viewImageModel() }}>
              <Text style={styles.text}>Close Modal</Text>
            </TouchableHighlight>
          </View>
        </Modal>
        
    )
  }
}

const styles = StyleSheet.create(
  {
    container: {
      flex: 1,
      justifyContent: 'center',
      alignItems: 'center',
      margin: 20
    },
    modal: {
      flex: 1,
      alignItems: 'center',
      backgroundColor: '#2196f3',
      justifyContent: 'center',
      padding : 10,
    },
    text: {
      color: '#fff',
      fontSize: 20,
      textAlign: 'center',
    },
    touchableButton: {
      width: '70%',
      padding: 10,
      backgroundColor: '#f06292',
      marginBottom: 10,
      marginTop: 30,
    },
  });

上面的模型从下面的子组件调用

export default class AddExpense extends React.Component  {
    constructor(props){
        super(props);
        this.state={
            reciptVisible:false
        }
        this.viewImageModel= this.viewImageModel.bind(this);
    }
    viewImageModel(){
        if(this.state.reciptVisible == true)
            this.setState({reciptVisible:false})
        else
            this.setState({reciptVisible:true})
    }
render(){
        return (
          // Your Code
          {this.state.reciptVisible && (
                <ImageModel visbility={this.state.reciptVisible} viewImageModel={this.viewImageModel}></ImageModel>
                )} 
            <TouchableOpacity onPress={ this.viewImageModel } >
                        <Image
                            source={{
                            uri: 'data:image/jpeg;base64,' + this.state.filePath.data,
                            }}
                            
                            style={{ width: 100, height: 80 }}
                        />
                    </TouchableOpacity>
     )}
}