git://www.github.com/bodyflex/react-native-simple-modal.git
git clone http://www.github.com/bodyflex/react-native-simple-modal
$ svn co --depth empty http://www.github.com/bodyflex/react-native-simple-modal
Checked out revision 1.
$ cd repo
$ svn up trunk
一个简单的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> ); } }