react-native 寶寶秀專案學習筆記（一）
阿新 • • 發佈：2019-02-14
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 classApp 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}> <Iconname={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' }, });執行效果：
