个人中心
gpt4 book ai didi

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

转载 作者：qq735679552 更新时间：2022-09-27 22:32:09 26 4
gpt4 key购买 nike

CFSDN坚持开源创造价值，我们致力于搭建一个资源共享平台，让每一个IT人在这里找到属于你的精彩世界.

这篇CFSDN的博客文章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编写的那部分内容覆盖在原生视图上显示.

下面是代码:

?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
// 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，充当导航条，你可以将其换成一个按钮就行了； 。

效果如图:

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

总结 。

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

原文链接：http://blog.csdn.net/syg90178aw/article/details/51647262 。

最后此篇关于React Native学习教程之Modal控件自定义弹出View详解的文章就讲到这里了,如果你想了解更多关于React Native学习教程之Modal控件自定义弹出View详解的内容请搜索CFSDN的文章或继续浏览相关文章，希望大家以后支持我的博客！ 。

26 4 0
文章推荐： Spring Cloud Data Flow初体验以Local模式运行
文章推荐： httpd 使用 Rust 重写 mod_ssl 模块
文章推荐： 深入了解Java ServletContext
文章推荐： 如何把Spring Cloud Data Flow部署在Kubernetes上
qq735679552
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com