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