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