React Native 控件之 Modal 詳解 - Android/iOS 雙平臺通用

(一)前言

今天我們來看一下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/非死book/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);</code></pre> 
  
運行效果如下:
 
  
iOS平臺運行效果
 
  
 
  
Android平臺運行效果:
 
  
 
  
 
 
  
來自： http://www.lcode.org/react-native-控件之modal詳解-androidios雙平臺通用56/