神刀安全网

React Native 控件之 Modal 详解 – Android/iOS 双平台通用 | 江清清的技术专栏

尊重版权,未经授权不得转载

本文来自:江清清的技术专栏(http://www.lcode.org)

(一)前言

今天我们来看一下React Native控件Modal具体介绍以及实际使用方法,该适配Android、iOS双平台。

刚创建的React Native技术交流4群( 458982758 ),欢迎各位大牛,React Native技术爱好者加入交流!同时博客右侧欢迎微信扫描关注订阅号,移动技术干货,精彩文章技术推送!

Modal视图在iOS原生开发中熟称:"模态视图",Modal进行封装之后,可以弹出来覆盖包含React Native跟视图的原生界面(例如:UiViewControllView,Activity)。在使用React Native开发的混合应用中使用Modal组件,该可以让你使用RN开发的内功呈现在原生视图的上面。

如果你使用React Native开发的应用,从跟视图就开始开发起来了,那么你应该是Navigator导航器进行控制页面弹出,而不是使用Modal模态视图。通过顶层的Navigator,你可以使用configureScene属性进行控制如何在你开发的App中呈现一个Modal视图。

(二)属性方法

1.animated bool  控制是否带有动画效果

2.onRequestClose  Platform.OS===’android’? PropTypes.func.isRequired : PropTypes.func

3.onShow function方法

4.transparent bool  控制是否带有透明效果

5.visible  bool 控制是否显示

(三)实例

上面我们已经对于Modal组件做了相关介绍,下面我们使用一个实例具体来演示一下Modal组件的基本用法。首先来看一下具体代码:

/**  * Sample React Native App  * https://github.com/facebook/react-native  * @flow  */  import React, {   AppRegistry,   Component,   StyleSheet,   Text,   View,   TouchableHighlight,   Modal,   Switch, } from 'react-native';  class Button extends React.Component {   constructor(props){     super(props);     this.state={       active: false,     };     this._onHighlight = this.onHighlight.bind(this);     this._onUnhighlight = this.onUnhighlight.bind(this);   }    onHighlight() {     this.setState({active: true,});   }    onUnhighlight() {     this.setState({active: false,});   }    render() {     var colorStyle = {       color: this.state.active ? '#fff' : '#000',     };     return (       <TouchableHighlight         onHideUnderlay={this._onUnhighlight}         onPress={this.props.onPress}         onShowUnderlay={this._onHighlight}         style={[styles.button, this.props.style]}         underlayColor="#a9d9d4">           <Text style={[styles.buttonText, colorStyle]}>{this.props.children}</Text>       </TouchableHighlight>     );   } }  class ModalDemo extends Component {   constructor(props){     super(props);     this.state={       animationType: false,       modalVisible: false,       transparent: false,      };     this._toggleTransparent = this.toggleTransparent.bind(this);   }    _setModalVisible(visible) {     this.setState({modalVisible: visible});   }    _setAnimationType(type) {     this.setState({animationType: type});   }    toggleTransparent() {     this.setState({transparent: !this.state.transparent});   }    render() {      const modalBackgroundStyle = {       backgroundColor: this.state.transparent ? 'rgba(0, 0, 0, 0.5)' : '#f5fcff',      }      const innerContainerTransparentStyle = this.state.transparent       ? {backgroundColor: 'red', padding: 20}       : null     return (       <View style={{paddingTop:20,paddingLeft:10,paddingRight:10}}>         <Text style={{color:'red'}}>Modal实例演示</Text>         <Modal           animated={this.state.animationType}           transparent={this.state.transparent}           visible={this.state.modalVisible}           onRequestClose={() => {this._setModalVisible(false)}}           >           <View style={[styles.container, modalBackgroundStyle]}>             <View style={[styles.innerContainer, innerContainerTransparentStyle]}>               <Text>Modal视图被显示:{this.state.animationType === false ? '没有' : '有',this.state.animationType}动画效果.</Text>               <Button                 onPress={this._setModalVisible.bind(this, false)}                 style={styles.modalButton}>                   关闭Modal               </Button>             </View>           </View>         </Modal>         <View style={styles.row}>           <Text style={styles.rowTitle}>动画类型</Text>           <Button onPress={this._setAnimationType.bind(this,false)} style={this.state.animationType === false ? {backgroundColor:'red'}: {}}>             无动画           </Button>           <Button onPress={this._setAnimationType.bind(this, true)} style={this.state.animationType === true ? {backgroundColor:'yellow'} : {}}>             滑动效果           </Button>         </View>          <View style={styles.row}>           <Text style={styles.rowTitle}>透明</Text>           <Switch value={this.state.transparent} onValueChange={this._toggleTransparent} />         </View>          <Button onPress={this._setModalVisible.bind(this, true)}>             显示Modal         </Button>       </View>     )}   }  const styles = StyleSheet.create({   container: {     flex: 1,     justifyContent: 'center',     padding: 20,   },   innerContainer: {     borderRadius: 10,     alignItems: 'center',   },   row: {     alignItems: 'center',     flex: 1,     flexDirection: 'row',     marginBottom: 20,   },   rowTitle: {     flex: 1,     fontWeight: 'bold',   },   button: {     borderRadius: 5,     flex: 1,     height: 44,     alignSelf: 'stretch',     justifyContent: 'center',     overflow: 'hidden',   },   buttonText: {     fontSize: 18,     margin: 5,     textAlign: 'center',   },   modalButton: {     marginTop: 10,   }, });  AppRegistry.registerComponent('ModalDemo', () => ModalDemo);

运行效果如下:

iOS平台运行效果

React Native 控件之 Modal 详解 - Android/iOS 双平台通用 | 江清清的技术专栏

Android平台运行效果:

React Native 控件之 Modal 详解 - Android/iOS 双平台通用 | 江清清的技术专栏

(四)最后总结

今天我们主要学习一下Modal组件详解。当前所讲解内容同时适配Android、iOS双平台。大家有问题可以加一下群React Native技术交流4群( 458982758 ).或者底下进行回复一下。

尊重原创,未经授权不得转载:From Sky丶清( http://www.lcode.org/ ) 侵权必究!

关注我的订阅号(codedev123),每天分享移动开发技术(Android/IOS),项目管理以及博客文章!(欢迎关注,第一时间推送精彩文章)

React Native 控件之 Modal 详解 - Android/iOS 双平台通用 | 江清清的技术专栏

关注我的微博,可以获得更多精彩内容

React Native 控件之 Modal 详解 - Android/iOS 双平台通用 | 江清清的技术专栏

转载本站任何文章请注明:转载至神刀安全网,谢谢神刀安全网 » React Native 控件之 Modal 详解 – Android/iOS 双平台通用 | 江清清的技术专栏

分享到:更多 ()

评论 抢沙发

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址