react-native-simple-modal, 一个简单的JavaScript模式组件用于

一个简单的JavaScript模式组件用于。 适用于iOS和 Android。

安装

npm install react-native-simple-modal --save

用法

请参见示例确保将 <Modal> 放在渲染函数的末尾，以便将 above 呈现为内容 ！ ( rn 目前尚不支持 z-index )。

属性及其默认值

importModalfrom'react-native-simple-modal';<Modal
 open={false}
 offset={0}
 overlayBackground="rgba(0, 0, 0, 0.75)" animationDuration={200}
 animationTension={40}
 modalDidOpen={() =>undefined}
 modalDidClose={() =>undefined}
 closeOnTouchOutside={true}
 containerStyle={{
 justifyContent:'center' }}
 modalStyle={{
 borderRadius:2,
 margin:20,
 padding:10,
 backgroundColor:'#F5F5F5' }}
 disableOnBackPress={false}></Modal>

示例

importReactfrom'react';import {Text, TouchableOpacity, View} from'react-native';importModalfrom'react-native-simple-modal';exportdefaultclassAppextendsReact.Component {
 state = {open:false};
 modalDidOpen= () =>console.log('Modal did open.')
 modalDidClose= () => {
 this.setState({open:false});
 console.log('Modal did close.');
 }
 moveUp= () =>this.setState({offset:-100})
 resetPosition= () =>this.setState({offset:0})
 openModal= () =>this.setState({open:true})
 closeModal= () =>this.setState({open:false})
 render() {
 return (
 <View style={{flex:1, justifyContent:'center', alignItems:'center'}}><TouchableOpacity onPress={this.openModal}><Text>Open modal</Text></TouchableOpacity><Modal
 offset={this.state.offset}
 open={this.state.open}
 modalDidOpen={this.modalDidOpen}
 modalDidClose={this.modalDidClose}
 style={{alignItems:'center'}}><View style={{alignItems:'center'}}><Text style={{fontSize:20, marginBottom:10}}>Hello world!</Text><TouchableOpacity
 style={{margin:5}}
 onPress={this.moveUp}><Text>Move modal up</Text></TouchableOpacity><TouchableOpacity
 style={{margin:5}}
 onPress={this.resetPosition}><Text>Reset modal position</Text></TouchableOpacity><TouchableOpacity
 style={{margin:5}}
 onPress={this.closeModal}><Text>Close modal</Text></TouchableOpacity></View></Modal></View> );
 }
}