帮酷LOGO
  • 显示原文与译文双语对照的内容
A simple JavaScript modal component for React Native.

  • 源代码名称:react-native-simple-modal
  • 源代码网址:http://www.github.com/bodyflex/react-native-simple-modal
  • react-native-simple-modal源代码文档
  • react-native-simple-modal源代码下载
  • Git URL:
    git://www.github.com/bodyflex/react-native-simple-modal.git
  • Git Clone代码到本地:
    git clone http://www.github.com/bodyflex/react-native-simple-modal
  • Subversion代码到本地:
    $ svn co --depth empty http://www.github.com/bodyflex/react-native-simple-modal
    Checked out revision 1.
    $ cd repo
    $ svn up trunk
  • react-native-simple-modal

    一个简单的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> );
     }
    }



    Copyright © 2011 HelpLib All rights reserved.    知识分享协议 京ICP备05059198号-3  |  如果智培  |  酷兔英语