/** * 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);

/** * Sample React Native App * https://github.com/facebook/react-native * 周少停 ScrollView demo * 2016-09-20 *///首先导入计时器类库://终端:  cd 项目根目录//      npm i react-timer-mixin --save//noinspection JSUnresolvedVariableimport React, { Component } from ‘react‘;import {  AppRegistry,  StyleSheet,  Text,  ScrollView,  Image,  View} from ‘react-native‘;//引入计时器类库var TimerMixin = require(‘react-timer-mixin‘);//引入json数据var ImageData = http://www.mamicode.com/require(‘./imageTitleJson.json‘);"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);

/** * 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);

/** * 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);