React Native学习教程之Modal控件自定义弹出View详解

前言

最近在学习RN,好多知识都懒得写,趁今天有空,来一发吧,Modal控件的一个小demo;下面话不多说了,来一起看看详细的介绍吧。

参考文章地址:http://reactnative.cn/docs/0.27/modal.html#content

Modal组件可以用来覆盖包含React Native根视图的原生视图(如UIViewController,Activity)。

在嵌入React Native的混合应用中可以使用Modal。Modal可以使你应用中RN编写的那部分内容覆盖在原生视图上显示。

下面是代码:

// HomePage
// 功能: 该类的作用
// Created by 小广 on 2016-06-12 上午.
// Copyright © 2016年 All rights reserved. 

'use strict';
import React, { Component } from 'react';
import {
 View,
 Text,
 Image,
 Modal,
 Navigator,
 TextInput,
 ScrollView,
 StyleSheet,
 Dimensions,
 TouchableHighlight,
} from 'react-native';
import NavigatorBar from '../tools/navigator'
var { width, height, scale } = Dimensions.get('window');
// 类
export default class HomePage extends Component {
 // 构造函数
 constructor(props) {
 super(props);
 this.state = {
  show:false,
 };
 } 

 // 加载完成
 componentDidMount(){
 //
 } 

 // view卸载
 componentWillUnmount(){
 //
 } 

 // 自定义方法区域
 // your method
 _leftButtonClick() { 

 }
 _rightButtonClick() {
 //
 console.log('右侧按钮点击了');
 this._setModalVisible();
 } 

 // 显示/隐藏 modal
 _setModalVisible() {
 let isShow = this.state.show;
 this.setState({
  show:!isShow,
 });
 } 

 // 绘制View
 render() {
  return (
  <View style={styles.container}>
   <NavigatorBar
   title='Modal测试'
   titleTextColor='#F2380A'
   rightItemTitle='按钮'
   rightTextColor='#F2380A'
   rightItemFunc={this._rightButtonClick.bind(this)} />
   <Modal
   animationType='slide'
   transparent={true}
   visible={this.state.show}
   onShow={() => {}}
   onRequestClose={() => {}} >
   <View style={styles.modalStyle}>
    <View style={styles.subView}>
    <Text style={styles.titleText}>
     提示
    </Text>
    <Text style={styles.contentText}>
     Modal显示的View 多行了超出一行了会怎么显示,就像这样显示了很多内容该怎么显示,看看效果
    </Text>
    <View style={styles.horizontalLine} />
    <View style={styles.buttonView}>
     <TouchableHighlight underlayColor='transparent'
     style={styles.buttonStyle}
     onPress={this._setModalVisible.bind(this)}>
     <Text style={styles.buttonText}>
      取消
     </Text>
     </TouchableHighlight>
     <View style={styles.verticalLine} />
     <TouchableHighlight underlayColor='transparent'
     style={styles.buttonStyle}
     onPress={this._setModalVisible.bind(this)}>
     <Text style={styles.buttonText}>
      确定
     </Text>
     </TouchableHighlight>
    </View>
    </View>
   </View>
  </Modal>
  </View>
  );
 } 

}
// Modal属性
// 1.animationType bool 控制是否带有动画效果
// 2.onRequestClose Platform.OS==='android'? PropTypes.func.isRequired : PropTypes.func
// 3.onShow function方法
// 4.transparent bool 控制是否带有透明效果
// 5.visible bool 控制是否显示 

// css样式
var styles = StyleSheet.create({
 container:{
 flex:1,
 backgroundColor: '#ECECF0',
 },
 // modal的样式
 modalStyle: {
 // backgroundColor:'#ccc',
 alignItems: 'center',
 justifyContent:'center',
 flex:1,
 },
 // modal上子View的样式
 subView:{
 marginLeft:60,
 marginRight:60,
 backgroundColor:'#fff',
 alignSelf: 'stretch',
 justifyContent:'center',
 borderRadius: 10,
 borderWidth: 0.5,
 borderColor:'#ccc',
 },
 // 标题
 titleText:{
 marginTop:10,
 marginBottom:5,
 fontSize:16,
 fontWeight:'bold',
 textAlign:'center',
 },
 // 内容
 contentText:{
 margin:8,
 fontSize:14,
 textAlign:'center',
 },
 // 水平的分割线
 horizontalLine:{
 marginTop:5,
 height:0.5,
 backgroundColor:'#ccc',
 },
 // 按钮
 buttonView:{
 flexDirection: 'row',
 alignItems: 'center',
 },
 buttonStyle:{
 flex:1,
 height:44,
 alignItems: 'center',
 justifyContent:'center',
 },
 // 竖直的分割线
 verticalLine:{
 width:0.5,
 height:44,
 backgroundColor:'#ccc',
 },
 buttonText:{
 fontSize:16,
 color:'#3393F2',
 textAlign:'center',
 },
}); 

注意:NavigatorBar是我自定义的一个View,充当导航条,你可以将其换成一个按钮就行了;

效果如图:

总结

以上就是这篇文章的全部内容了,希望本文的内容对大家的学习或者工作具有一定的参考学习价值,如果有疑问大家可以留言交流,谢谢大家对我们的支持。

时间: 2017-10-17

React-Native 组件之 Modal的使用详解

Modal组件可以用来覆盖包含React Native根视图的原生视图(如UIViewController,Activity),用它可以实现遮罩的效果. 属性 Modal提供的属性有: animationType(动画类型) PropTypes.oneOf(['none', 'slide', 'fade'] none:没有动画 slide:从底部滑入 fade:淡入视野 onRequestClose(被销毁时会调用此函数) 在 'Android' 平台,必需调用此函数 onShow(模态显示的时

React Native之prop-types进行属性确认详解

属性确认的作用 使用 React Native 创建的组件是可以复用的,所以我们开发的组件可能会给项目组其他同事使用.但别人可能对这个组件不熟悉,常常会忘记使用某些属性,或者某些属性传递的数据类型有误. 因此我们可以在开发 React Native 自定义组件时,可以通过属性确认来声明这个组件需要哪些属性.这样,如果在调用这个自定义组件时没有提供相应的属性,则会在手机与调试工具中弹出警告信息,告知开发者该组件需要哪些属性. React Native已经升级到0.51.0了,版本升级很快,但是对老

React Native中Mobx的使用方法详解

前言 从今天开始我们来搞搞状态管理可否,这几天没怎么写博客,因为被病魔战胜了,tmd,突然的降温让我不知所措,大家最近注意安全,毕竟年底了,查的严,呸,大家注意保暖 特别声明:写该文只是写一下用MobX的思路,有很多地方我会直接放官网链接,因为官网已经写的够详细了 首先来个比较简单的,MobX. 引用官网上的一句话: MobX 是一个经过战火洗礼的库,它通过透明的函数响应式编程(transparently applying functional reactive programming - TF

React Native学习教程之自定义NavigationBar详解

前言 在刚开始学习React Native的时候,版本还是0.20,问题一大堆,Navigation这个问题更是很多,首先,是NavigationBar的问题,NavigationIOS有NavigationBar,Navigation却需要自定义一个,最后,我想了想,还是自定义一个view,岂不更好,现在新公司不用RN,我正好有点时间,就把自定义的NavigationBar分享给大家.好了少废话,上代码: 示例代码 // NavigationBar 导航条的自定义封装 // create by

React传值 组件传值 之间的关系详解

react 组件相互之间的传值: 传值分父级组件传值给子组件 子组件传值给父组件 平级组件.没有嵌套的组件相互传值 1.父组件向子组件传值 父组件通过属性的形式来向子组件传值,子组件通过props来接受父组件传递过来的参数 //子组件 class list extends React.Component{ constructor(props){ super(props); // 初始化可以不用管 } render(){ return( <div> <div>{this.props.

vue组件三大核心概念图文详解

前言 本文主要介绍属性.事件和插槽这三个vue基础概念.使用方法及其容易被忽略的一些重要细节.如果你阅读别人写的组件,也可以从这三个部分展开,它们可以帮助你快速了解一个组件的所有功能. 本文的代码请猛戳 github博客 ,纸上得来终觉浅,大家动手多敲敲代码! 一.属性 1.自定义属性props prop 定义了这个组件有哪些可配置的属性,组件的核心功能也都是它来确定的.写通用组件时,props 最好用对象的写法,这样可以针对每个属性设置类型.默认值或自定义校验属性的值,这点在组件开发中很重要,

vue组件间通信子与父详解(二)

接着vue组件父与子通信详解继续学习. 二.组件间通信(子组件传值给父组件) 通过事件的方式来完成数据的传输. ①在父组件中 定义一个方法,用来接收子组件所通过事件传来的值 methods:{ recvMsg:function(msg){ //参数msg就是子组件通过事件出来的数据 } } ②绑定事件处理函数 事件一般情况 都是自定义事件 <child-component @myEvent="recvMsg"></child-component> ③在子组件触发

vuejs动态组件给子组件传递数据的方法详解

通过子组件定义时候的props可以支持父组件给子组件传递数据,这些定义的props在子组件的标签中使用绑定属性即可,但是如果使用的是<component>动态组件,这个时候就没有显式的子组件标签,要给子组件传递数据需要在<component> 中进行绑定 <div class="app" id="deviceready"> <component :is="currentView" :user_name.s

COM组件中调用JavaScript函数详解及实例

COM组件中调用JavaScript函数详解及实例 要求是很简单的,即有COM组件A在IE中运行,使用JavaScript(JS)调用A的方法longCalc(),该方法是一个耗时的操作,要求通知IE当前的进度.这就要求使用回调函数,设其名称为scriptCallbackFunc.实现这个技术很简单: 1 .组件方(C++) 组件A 的方法在IDL中定义: [id(2)] HRESULT longCalc([in] DOUBLE v1, [in] DOUBLE v2, [in, optional

jQuery Ajax自定义分页组件(jquery.loehpagerv1.0)实例详解

简单的两个步骤即可实现分页功能 <script src="<%=basePath%>/resources/js/jquery-1.7.1.min.js"></script> <script src="<%=basePath%>/resources/js/jquery.loehpagerv1.0.js"></script> <script type="text/JavaScript