react-native 宝宝秀项目学习笔记（一）_rn import react, { appregistry, component, stylesh-优快云博客

本文介绍了一个使用React Native实现的Tab导航应用案例，包括自定义Tab栏样式和图标，以及四个Tab页面的内容展示。


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=ll

const{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'
    },

});
运行效果：