我是新的反应原生，我有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文件 HOME JS文件
导入后如何调用此弹出窗口。我的弹出窗口是组件，我需要撤销从第一个我的家庭js点击按钮
提前致谢
答案 0 :(得分：5)
您的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} />
...
)
}
}
希望这会有所帮助！
答案 1 :(得分：1)
我也需要这种模式。通过使用您的代码和研究，我试图创建可重用的模型。
请在下面发表评论以提出任何建议。
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>
)}
}