React Native组件之ScrollView 和 StatusBar和TabBarIos
React Native中的组件ScrollView类似于iOS中的UIScrollView,其基本的使用方法和熟悉如下:
/**
* Sample React Native App
* https://github.com/facebook/react-native
* 周少停 ScrollView 的常用属性
* 2016-09-19
*/ import React, { Component } from 'react';
import {
AppRegistry,
StyleSheet,
Text,
ScrollView,
AlertIOS,
View
} from 'react-native'; var Dimensions = require('Dimensions');
var {width,height} = Dimensions.get('window'); class Project extends Component {
render() {
return (
<View style={styles.container}>
<ScrollView
horizontal={true} //排列方向:横向 默认false纵向
showsHorizontalScrollIndicator={false} //隐藏水平线
pagingEnabled={true} //分页滑动 iOS
// scrollEnabled={false} //是否滚动 iOS
bounces={false} //关闭弹簧效果 iOS
onScrollBeginDrag={()=>this.beginDrag()} //开始滑动时调用
onScrollEndDrag={()=>this.endDrag()} //结束滑动时调用
onMomentumScrollEnd={()=>this.momentumScroll()}//当一帧滑动完毕后调用
>
{this.renderChildView()}
</ScrollView>
</View>
);
}
renderChildView(){
//数组
var allChild = [];
var colors = ['red','blue','yellow','cyan','purple'];
//遍历
for(var i=0; i<5;i++){
allChild.push( //装载
<View key={i} style={{backgroundColor:colors[i],width:width,height:120}}>
<Text>{i}</Text>
</View>
);
}
//返回
return allChild;
}
beginDrag(){
// AlertIOS.alert('开始滑动');
}
endDrag(){
// AlertIOS.alert('滑动结束');
}
momentumScroll(){
// AlertIOS.alert('一帧结束')
}
} const styles = StyleSheet.create({ }); AppRegistry.registerComponent('Project', () => Project);
demo:
/**
* Sample React Native App
* https://github.com/facebook/react-native
* 周少停 ScrollView demo
* 2016-09-20
*/
//首先导入计时器类库:
//终端: cd 项目根目录
// npm i react-timer-mixin --save
//noinspection JSUnresolvedVariable
import React, { Component } from 'react';
import {
AppRegistry,
StyleSheet,
Text,
ScrollView,
Image,
View
} from 'react-native';
//引入计时器类库
var TimerMixin = require('react-timer-mixin');
//引入json数据
var ImageData = require('./imageTitleJson.json');
//引入Dimensions
var Dimensions = require('Dimensions');
var width = Dimensions.get('window').width; var Project = React.createClass({
mixins: [TimerMixin], //注册计时器
//设置固定值
getDefaultProps(){
return{
//时间间隔
duration : 2000
}
},
//设置page的初始值和可变值
//默认第一页选中
getInitialState(){
return {
//当前页码
currentPage : 0
};
},
render() {
return (
<View style={styles.container}>
<ScrollView ref="scrollView" style={styles.scrollViewStyle}
horizontal={true} //水平排列
pagingEnabled={true} //分页滑动
onMomentumScrollEnd={(e)=>this.onAnimationEnd(e)} //一帧结束回调,去除()表示把该组件作为参数传过去
onScrollBeginDrag={this.BeginDrag} //开始拖拽就停止定时器
onScrollEndDrag={this.EndDrag} //停止拖拽就启动定时器
>
{this.readerAllImage()}
</ScrollView>
{/*返回六点*/}
<View style={styles.pageViewStyle}>
{this.renderPage()}
</View>
</View>
);
},
BeginDrag(){
//停止定时器
this.clearInterval(this.timer);
},
EndDrag(){
//开启定时器
this.startTimer();
},
//实现一些复杂操作
componentDidMount(){
//开启定时器
this.startTimer();
},
//实现定时器
startTimer(){
//得到scrollView
var scrollView = this.refs.scrollView;
var imgsArr = ImageData.data;
//添加定时器
this.timer = this.setInterval(function () {
//设置圆点
var activePage = 0;
//判断
if((this.state.currentPage+1) >= imgsArr.length){//越界
activePage = 0;
}else{
activePage = this.state.currentPage + 1;
}
//更新状态机
this.setState({
currentPage:activePage
});
//让scorllView动起来
var offsetX = activePage * width;
scrollView.scrollResponderScrollTo({x:offsetX,y:0,animation:true}); },this.props.duration);
},
//返回图片
readerAllImage(){
//数组
var allImage = [];
//拿到图片数组
var imgsArr = ImageData.data;
//遍历
for(var i=0; i<imgsArr.length;i++){
//去除单独的image
var imgItem = imgsArr[i];
//创建组件装入数组
allImage.push(
<Image key={i} source={{uri:imgItem.img}} style={{width:width,height:120}}/>
);
}
//返回数组
return allImage;
},
//返回圆点
renderPage(){
//定义一个数组放置所有圆点
var indicatorArr = [];
//拿到图片数组
var imgsArr = ImageData.data;
//圆点颜色style
var style;
//遍历
for(var i = 0;i<imgsArr.length;i++){
//判断
style = (i==this.state.currentPage) ? {color:'red'} : {color:'white'}
//装载进数组中
indicatorArr.push(
<Text key={i} style={[{fontSize:25},style]}>•</Text>
);
}
return indicatorArr;
},
//当一帧结束时,调用
onAnimationEnd(e){
//求出水平方向的偏移量
var offSetX = e.nativeEvent.contentOffset.x;
//求出当前的page
var currentPage = Math.floor(offSetX/width);
//更新状态机,修改绘制UI
this.setState({
currentPage : currentPage
});
}
}); const styles = StyleSheet.create({
container:{
marginTop:20
},
scrollViewStyle:{ },
pageViewStyle: {
width:width,
height:25,
backgroundColor:'rgba(0,0,0,0)',
position:'absolute',//绝对定位
bottom:0,
bottom:0,
flexDirection:'row',//主轴方向
alignItems:'center'
}
}); AppRegistry.registerComponent('Project', () => Project);
涉及到json:
{
"data":[
{
"img":"img_01",
"title":"叔叔,我们不约"
},
{
"img":"img_02",
"title":"看好,我要变形了"
},
{
"img":"img_03",
"title":"奇变偶不变,符号看象限"
},
{
"img":"img_04",
"title":"其实,我是你老爹"
},
{
"img":"img_05",
"title":"伯母.您好,我是您儿子的男朋友"
},
{
"img":"img_06",
"title":"该吃药了"
}
]
}
React Native 中StatusBar的相关属性,其他一些属性只限于安卓,一些属性只限于iOS,具体看React Native中文网
/**
* Sample React Native App
* https://github.com/facebook/react-native
* 周少停 2016-09-27
* StatusBar状态栏
*
**/ import React, { Component } from 'react';
import {
AppRegistry,
StyleSheet,
Text,
View,
StatusBar,
} from 'react-native'; class Project extends Component{
render() {
return (
<View style={styles.container}>
<StatusBar
// hidden = {true} //status显示与隐藏
// backgroundColor = 'red' //status栏背景色,仅支持安卓
// translucent = {true} //设置status栏是否透明效果,仅支持安卓
// barStyle = 'light-content' //设置状态栏文字效果,仅支持iOS,枚举类型:default黑light-content白
networkActivityIndicatorVisible = {true} //设置状态栏上面的网络进度菊花,仅支持iOS
showHideTransition = 'slide' //显隐时的动画效果.默认fade
/>
</View>
);
}
} const styles = StyleSheet.create({
container: {
flex: 1,
justifyContent: 'center',
alignItems: 'center',
backgroundColor: '#F5FCFF',
}
}); AppRegistry.registerComponent('Project', () => Project);
React NAtive中的TabBarIos也就是iOS中的UITabBarController,这里的TabBarIos仅可以iOS使用,若需安卓也适用,可以寻求第三方库。
/**
* Sample React Native App
* https://github.com/facebook/react-native
* 周少停 TabBarIos TabBarIos.Item
* 2016-09-22
*/ import React, { Component } from 'react';
import {
AppRegistry,
StyleSheet,
Text,
TabBarIOS,
View
} from 'react-native'; var Project = React.createClass({
//设置初始值
getInitialState(){
return{
//默认选中第一个Item
selectedTabBarItem: 'home'
}
},
render() {
return (
<View style={styles.container}>
<TabBarIOS barTintColor='black'>
<TabBarIOS.Item
systemIcon="bookmarks"
badge="3"
selected = {this.state.selectedTabBarItem == 'home'}
onPress = {()=>{this.setState({selectedTabBarItem: 'home'})}}
>
<View style={[styles.commonViewStyle,{backgroundColor: 'red'}]}>
<Text>首页</Text>
</View>
</TabBarIOS.Item> <TabBarIOS.Item
systemIcon="more"
selected = {this.state.selectedTabBarItem == 'second'}
onPress = {()=>{this.setState({selectedTabBarItem: 'second'})}}
>
<View style={[styles.commonViewStyle,{backgroundColor:'yellow'}]}>
<Text>第二页</Text>
</View>
</TabBarIOS.Item> <TabBarIOS.Item
systemIcon="downloads"
selected = {this.state.selectedTabBarItem == 'three'}
onPress = {()=>{this.setState({selectedTabBarItem: 'three'})}}
>
<View style={[styles.commonViewStyle,{backgroundColor:'cyan'}]}>
<Text>第三页</Text>
</View>
</TabBarIOS.Item> <TabBarIOS.Item
// systemIcon="contacts"
icon = {require('./1.png')}
badge="6"
selected = {this.state.selectedTabBarItem == 'four'}
onPress = {()=>{this.setState({selectedTabBarItem: 'four'})}}
>
<View style={[styles.commonViewStyle,{backgroundColor:'blue'}]}>
<Text>第四页</Text>
</View>
</TabBarIOS.Item>
</TabBarIOS>
</View>
);
}
}); const styles = StyleSheet.create({
container:{
flex:1,
backgroundColor:'#f5fcff',
},
commonViewStyle:{
flex:1,
justifyContent:'center',
alignItems:'center'
}
}); AppRegistry.registerComponent('Project', () => Project);
完整源码下载:https://github.com/pheromone/React-Native-1
React Native组件之ScrollView 和 StatusBar和TabBarIos的更多相关文章
- beeshell —— 开源的 React Native 组件库
介绍 beeshell 是一个 React Native 应用的基础组件库,基于 0.53.3 版本,提供一整套开箱即用的高质量组件,包含 JavaScript(以下简称 JS)组件和复合组件(包含 ...
- React Native组件(二)View组件解析
相关文章 React Native探索系列 React Native组件系列 前言 了解了RN的组件的生命周期后,我们接着来学习RN的具体的组件.View组件是最基本的组件,也是首先要掌握的组件,这一 ...
- React Native组件之Text
React Native组件之Text相当于iOS中的UILabel. 其基本属性如下: /** * Sample React Native App * https://github.com/face ...
- React Native组件之Switch和Picker和Slide
React Native组件Switch类似于iOS中的UISwitch:组件Slide类似于iOS中UIslider,组件Picker类似于iOS的UIPickerView.他们的使用方法和相关属性 ...
- React Native 组件之TextInput
React Native 组件之TextInput类似于iOS中的UITextView或者UITextField,是作为一个文字输入的组件,下面的TextInput的用法和相关属性. /** * Sa ...
- react native组件的生命周期
react native组件的生命周期 一.当页面第一次加载时,会依次调用: constructor() componentWillMount(): 这个函数调用时机是在组件创建,并初始化了状态之后, ...
- react native组件的创建
react native组件的创建 react文件加载顺序: react项目启动后,先加载index.js.在index.js中可以指向首页. import { AppRegistry } from ...
- React Native组件(三)Text组件解析
相关文章 React Native探索系列 React Native组件系列 前言 此前介绍了最基本的View组件,接下来就是最常用的Text组件,对于Text组件的一些常用属性,这篇文章会给出简单的 ...
- Android React Native组件的生命周期及回调函数
熟悉android的童鞋应该都清楚,android是有生命周期的,其很多组件也是有生命周期.今天小编和大家分享的React Native组件的生命周期,还不了解的童鞋,赶紧来围观吧 在android开 ...
随机推荐
- 招聘一个靠谱的 iOS
近一年内陆续面试了不少人了,从面试者到面试官的转变让我对 iOS 招聘有了更多的感受.经过了前段时间的一大波面试,我们终于找到了志同道合的小伙伴,面试也暂时告一段落了.总结下面试人过程中的感受,你也可 ...
- Analyzer报表结果行
声明:原创作品,转载时请注明文章来自SAP师太技术博客( 博/客/园www.cnblogs.com):www.cnblogs.com/jiangzhengjun,并以超链接形式标明文章原始出处,否则将 ...
- 3个常用基于Linux系统命令行WEB网站浏览工具(w3m/Links/Lynx)
一般我们常用的浏览器肯定是基于可视化界面的图文结合的浏览界面效果,比如FireFox.Chrome.Opera等等,但是有些时候折腾和项目 的需要,在Linux环境中需要查看某个页面的文字字符,我们需 ...
- php : 匿名函数(闭包) [一]
摘自: http://www.cnblogs.com/starlion/p/3894578.html 一:匿名函数 (在php5.3.0 或以上才能使用) php中的匿名函数(Anonymous fu ...
- 微内核架构(Microkernel Architecture)
微内核架构(Microkernel Architecture) 微内核架构有时也被成为插件架构模式(plug-in architecture pattern),通常用于实现基于产品的应用,如Eclip ...
- python pymongo-ensure_index
create_index 与 ensure_index 一.概述 ensure_index() 在mongoDB中创建索引 看了[1]感觉自己有些断章取义 ----------41316-- 参考链接 ...
- python的类和对象——进阶篇
写在前面的话 终于,又到了周五.当小伙伴们都不再加班欢欢喜喜过周末的时候,我刚刚写完这一周的游戏作业,从面对晚归的紧皱眉头到现在的从容淡定,好像只有那么几周的时间.突然发现:改变——原来这么简单.很多 ...
- windows下面安装casperjs
因为需要 就学习了一下casperjs,CasperJS是一个开源的导航脚本处理和测试工具,基于PhantomJS(前端自动化测试工具)编写.由于casperjs对PhantomJS的依赖性,所以需要 ...
- 有关于psExec的使用
psExec是微软pstools工具包中最常用的一个工具,也是在内网渗透中的免杀渗透利器. psExec能够在命令行下在对方没有开启telnet服务的时候返回一个半交互的命令行,像telnet客户端一 ...
- WIN7 java7 环境变量配置
1 首先要搞清楚,java可能安装了两个部分,一个叫JDK,一个叫jre.其中jre若已经安装了,那么在安装JDK的时候,就不要放在默认的C:\Program File\java\XXX目录.最好另起 ...