React Native组件之ScrollView 和 StatusBar和TabBarIos

Posted 2020-08-13

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

　　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