react-native 宝宝秀项目学习笔记（一）

App.js文件
import React, { Component } from 'react';import {    AppRegistry,    StyleSheet,    Text,    View} from 'react-native';import List from './Component/List/List'import Edit from './Component/Edit/Edit'import Picture from './Component/Picture/Picture'import Account from './Component/Account/Account'import ScrollableTabView, {DefaultTabBar,ScrollableTabBar} from 'react-native-scrollable-tab-view';import Icon from 'react-native-vector-icons/Ionicons'    //http://ionicframework.com/docs/ionicons/用到的图标库网站import IconFont from 'react-native-vector-icons/FontAwesome'import DfyTabBar from './DfyTabBar'export default class App extends Component {    constructor(props){        super(props)        this.state = {            tabNames:['视频列表','录制','图片展示','我的账号'],            tabIconNames:['ios-videocam','ios-recording','ios-reverse-camera','ios-contact']        }    }    render() {        let tabNames = this.state.tabNames;        let tabIconNames = this.state.tabIconNames;        return (            <ScrollableTabView                // renderTabBar={() => <ScrollableTabBar/>}                renderTabBar={() => <DfyTabBar tabNames={tabNames} tabIconNames={tabIconNames}/>}                //renderTabBar: tab的样式，组件自己有两种样式，DfyTabBar为我们自己自定义的tab样式                tabBarPosition='bottom'  //设置tab的位置，默认为顶部。                onChangeTab={  //Tab切换时触发此函数                    (obj) => {                        console.log('被选中的tab下标：' + obj.i);                        //i为被选中tab的下标                    }                }                onScroll={  //视图在滑动时触发此方法                    (position) => {                        console.log('滑动时的位置：' + position);                        //position为第几个tab（从0开始）                    }                }                locked={false}//表示手指是否能拖动视图，默认为false（表示可以拖动）                initialPage={0} //初始化时被选中的Tab下标                prerenderingSiblingsNumber={1}            >                {/*每个tab对应的view 必须加上一个属性tabLabel，并且值不能一样*/}                <List tabLabel="list"/>                <Edit tabLabel="edit"/>                <Picture tabLabel="picture"/>                <Account tabLabel="account"/>            </ScrollableTabView>        );    }}const styles = StyleSheet.create({    container: {        flex: 1,        justifyContent: 'center',        alignItems: 'center',        backgroundColor: '#F5FCFF',    },    center: {        flex: 1,        justifyContent: 'center',        alignItems: 'center',    },    welcome: {        fontSize: 20,        textAlign: 'center',        margin: 10,    },    instructions: {        textAlign: 'center',        color: '#333333',        marginBottom: 5,    },});


自定义的tab
dfyTabBar.js
import React, { Component } from 'react';import {    AppRegistry,    StyleSheet,    Text,    TouchableOpacity,    View} from 'react-native';import Icon from 'react-native-vector-icons/Ionicons';//Icon 图标第三方组件，使用react-native-vector-icons需要对项目进行设置，具体参照github--react-native-vector-icons
//Icon组件中的name属性就是设置Icon图标的图片，需要从网上查找。
export default class DfyTabBar extends Component {    static propTypes = {   //React.PropTypes设定输入数据的类型，即调用此组件时，参数的设定必须遵循设定好的数据类型。        goToPage: React.PropTypes.func, // 跳转到对应tab的方法      activeTab: React.PropTypes.number, // 当前被选中的tab下标      tabs: React.PropTypes.array, // 所有tabs集合      //goToPage,activeTab,tabs 为自定义tab的必要属性，必须添加！      tabNames: React.PropTypes.array, // 保存Tab名称      tabIconNames: React.PropTypes.array, // 保存Tab图标    };  // 注意这里有分号    render() {        return (   //固定写法         <View style={styles.tabs}>            {this.props.tabs.map((tab, i) => this.renderTabOption(tab, i))}         </View>      );    }    componentDidMount() {      // Animated.Value监听范围 [0, tab数量-1]      this.props.scrollValue.addListener(this.setAnimationValue);   }    setAnimationValue({value}) {      console.log('动画值：'+value);   }    renderTabOption(tab, i) {      let color = this.props.activeTab == i ? "orange" : "#ADADAD"; // 判断i是否是当前选中的tab，设置不同的颜色      return (         <TouchableOpacity onPress={()=>this.props.goToPage(i)} style={styles.tab} key={tab}>                                                      {/*使用goToPage跳转到对应的tab*/}            <View style={styles.tabItem}>               <Icon                name={this.props.tabIconNames[i]} // 图标                  size={30}                  color={color}/>               <Text style={{color: color}}>                  {this.props.tabNames[i]}               </Text>            </View>         </TouchableOpacity>      );   }}const styles = StyleSheet.create({    tabs: {      flexDirection: 'row',      height: 50,   },   tab: {      flex: 1,      justifyContent: 'center',      alignItems: 'center',   },   tabItem: {      flexDirection: 'column',      alignItems: 'center',   },});

首页List.js 代码：
import React, { Component } from 'react';import {    AppRegistry,    StyleSheet,    Text,    View,    ListView,    TouchableHighlight,    Image} from 'react-native';import Dimensions from 'Dimensions';import Icon from 'react-native-vector-icons/Ionicons'//rap.taobao.org  提供模拟数据//后台数据接口：：http://rapapi.org/mockjs/24724/api/list?accessToken=llconst{width,height}=Dimensions.get('window');export default class List extends Component {    constructor(props) {        super(props);        //设置listView的数据源（固定写法）        var ds = new ListView.DataSource({rowHasChanged: (r1, r2) => r1 !== r2});        this.state = {            dataSource: ds.cloneWithRows([                {                    "_id":"610000201612228650","thumb":"http://dummyimage.com/1280x720/9f9dea)","title":"@cparagraph(1,3)","video":"\"http://v.youku.com/v_show/id_XMjk3MjYxNzUwOA==.html?spm=a2hww.20023042.ykRecommend.5~5!3~5~5~A'"                }                ,                {                    "_id":"140000201212201878","thumb":"http://dummyimage.com/1280x720/758a46)","title":"@cparagraph(1,3)","video":"\"http://v.youku.com/v_show/id_XMjk3MjYxNzUwOA==.html?spm=a2hww.20023042.ykRecommend.5~5!3~5~5~A'"                }                ,                {                    "_id":"310000199703043642","thumb":"http://dummyimage.com/1280x720/13ce1c)","title":"@cparagraph(1,3)","video":"\"http://v.youku.com/v_show/id_XMjk3MjYxNzUwOA==.html?spm=a2hww.20023042.ykRecommend.5~5!3~5~5~A'"                }            ]),        };    }    render() {        return (            <View style={styles.container}>                <View style={styles.header}>                    <Text style={styles.headerText}>                       视频列表                    </Text>                </View>                <ListView                    dataSource={this.state.dataSource}                    renderRow={this._renderRow}                    enableEmptySections={true} //允许有空模块                    style={styles.listView}                />            </View>        );    }    _renderRow=(rowData)=>{        return(            <TouchableHighlight>                <View style={styles.item}>                    <Text style={styles.title}>{rowData.title}</Text>                    <Image style={styles.thumb} source={{uri:rowData.thumb}}>                        <Icon                            name='ios-play' // 图标                            size={28}                            style={styles.play}/>                    </Image>                    <View style={styles.itemFooter}>                        <View style={styles.handleBox}>                            <Icon                                name='ios-heart-outline' // 图标                                size={28}                                style={styles.up}/>                            <Text style={styles.handleText}>点赞</Text>                        </View>                        <View style={styles.handleBox}>                            <Icon                                name='ios-chatbubbles' // 图标                                size={28}                                style={styles.commentIcon}/>                            <Text style={styles.handleText}>评论</Text>                        </View>                    </View>                </View>            </TouchableHighlight>        )    }}const styles = StyleSheet.create({    container: {        flex: 1,        backgroundColor: '#F5FCFF',    },    welcome: {        fontSize: 20,        textAlign: 'center',        margin: 10,    },    header:{        paddingTop:20,        paddingBottom:12,        backgroundColor:'#ee753c'    },    headerText:{        fontSize:16,        fontWeight:'600',        textAlign:'center',        color:'#fff',    },    listView:{        paddingTop:20,        backgroundColor:'#f5fcff',    },    item:{        width:width,        marginBottom:10,        backgroundColor:'white',    },    title:{        fontSize:18,        padding:10,        color:'#333',    },    thumb:{        width:width,        height:width*0.56,        resizeMode:'cover'    },    play:{        position:'absolute',        bottom:14,        right:14,        width:40,        height:40,        paddingLeft:15,        paddingTop:5,        backgroundColor:'transparent',        borderColor:'#000',        borderWidth:1,        borderRadius:20,        color:'#ed7b66'    },    itemFooter:{        flexDirection:'row',        justifyContent:'space-between',        backgroundColor:'#eee',    },    handleBox:{        padding:10,        flexDirection:'row',        width:width/2 - 0.5,        justifyContent:'center',        backgroundColor:'white',    },    up:{        fontSize:22,        color:'#333'    },    handleText:{        fontSize:22,        color:'#333',        paddingLeft:12    },    commentIcon:{        fontSize:18,        color:'#333'    },});
运行效果：