reactjs - 来自不同组件的 React Native 开放模式
问题描述
我是反应原生的新手,我有 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 按钮时撤消它
提前致谢
解决方案
您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} />
...
)
}
}
希望这会有所帮助!
推荐阅读
- javascript - Java 脚本 - 返回 div 滚动高度
- azure - Azure 文件同步可以在服务器文件夹和 Blob 之间同步吗?
- c++ - 如何在循环中动态创建变量(c++)
- flutter - Flutter:知道用户退出ap的功能
- redis - 如何将数据存储在支持多字段部分搜索的redis缓存中
- python - Discord 机器人在处理其他事情时暂停(不响应命令)
- python - Python - 在具有不同长度的列表列表中找到N个最大数
- python - 无法使用具有多个 websocket 连接的 websockets 模块
- java - 如何响应鼠标单击形状
- tensorflow2.0 - tf 数据窗口多输入