开发一个基于React Native的简易demo--源码

这几篇博客的最终目地是为了给我自己做笔记，所以我不管文章对其他人有没有帮助。只为我自己！！！

源码：

/** * Sample React Native App * https://github.com/facebook/react-native * @flow */ import React,{ Component } from 'react'; import { Platform,StyleSheet,Text,View,Image,AppRegistry,FlatList,ScrollView,ListView,TouchableHighlight,Dimensions,ToastAndroid } from 'react-native'; import { TabNavigator } from "react-navigation"; import Swiper from 'react-native-swiper'; import Video from 'react-native-video'; const { width } = Dimensions.get('window') //文字列表类 class CELL extends Component{ constructor(props){ super(props); this.state = { detailTitle:'aaaa'}; } render(){ return( <View style={{flexDirection: 'column',backgroundColor:'#363636'}}> <View style={{flexDirection: 'row',padding:10,justifyContent:'center',flex:1,alignItems:'center'}} > <Text style={{flex:2,marginLeft:10,marginRight:10,color:'#fff',fontSize: 15}} >{this.props.title}</Text> <Text style={{flex:1,fontSize: 12,textAlign:'right'}}>{this.props.detailTitle}</Text> </View> <View style={{height:.5,alignSelf:'stretch',backgroundColor:'gray'}}></View> </View> ); } } //视频列表类 class COLL extends Component{ constructor(props){ super(props); this.state = { detailTitle:'aaaa'}; } render(){ return( /*总体的布局，沿着竖轴排列*/ <View style={{flexDirection:'column',backgroundColor:'#363636',borderBottomWidth:3,borderBottomColor:'#121212'}}> {/* 第一部分:信息部分，里面分为3个列，沿着水平轴排列 */} <View style={{flexDirection:'row',alignItems:'center'}} > {/*头像*/} <View style={{flexDirection: 'row',flex:1}} > <Image source={require('./img/profile.jpg')} style={styles.imgProfile}></Image> </View> {/*作者信息和发布时间/观看信息*/} <View style={{flexDirection:'row',flex:6,alignItems:'center'}} > {/* 作者信息 */} <View style={{flexDirection:'column',justifyContent:'flex-start'}} > <Text style={{flex:1,color:'#1C86EE',textAlign:'left'}}>刘邦</Text> <Text style={{flex:1,fontSize: 10,textAlign:'left'}}>Duang</Text> </View> {/* 发布时间/观看信息 */} <View style={{flexDirection:'column',justifyContent:'flex-end'}} > {/* 发布时间 */} <Text style={{flex:1,textAlign:'right'}}>4天前</Text> {/* 观看 */} <View style={{flexDirection:'row',justifyContent:'flex-end',flex:1}} > <Text style={{flex:4}}></Text> <Image source={require('./img/view.png')} style={{width:16,height:16}}></Image> <Text style={{flex:1,textAlign:'left'}}>4563</Text> </View> </View> </View> </View> {/* 第二部分:视频 就一个View*/} <View style={{flexDirection:'row',alignItems:'center'}} > {/* <Image source={require('./img/profile.jpg')} style={{width:width,height:150}}></Image> */} <Video ref="myvideo" source={{uri:"http://clips.vorwaerts-gmbh.de/big_buck_bunny.mp4"}} style={{width:width,height:180,top: 0,left: 0,bottom: 0,right: 0,}} rate={1.0} // 0 is paused,1 is normal. volume={1.0} // 0 is muted,1 is normal. muted={false} // Mutes the audio entirely. paused={false} // Pauses playback entirely. resizeMode="cover" // Fill the whole screen at aspect ratio.* repeat={true} // Repeat forever. playInBackground={false} // Audio continues to play when app entering background. playWhenInactive={false} // [iOS] Video continues to play when control or notification center are shown. ignoreSilentSwitch={"ignore"} // [iOS] ignore | obey - When 'ignore',audio will still play with the iOS hard silent switch set to silent. When 'obey',audio will toggle with the switch. When not specified,will inherit audio settings as usual. progressUpdateInterval={250.0} // [iOS] Interval to fire onProgress (default to ~250ms) onLoadStart={this.loadStart} // Callback when video starts to load onLoad={this.setDuration} // Callback when video loads onProgress={this.setTime} // Callback every ~250ms with currentTime onEnd={this.onEnd} // Callback when playback finishes onError={this.videoError} // Callback when video cannot be loaded onBuffer={this.onBuffer} // Callback when remote video is buffering onTimedMetadata={this.onTimedMetadata} // Callback when the stream receive some metadata /> </View> {/* 第三部分: 点赞评论分享 */} <View style={{flexDirection:'row',alignItems:'center',borderBottomWidth:1,borderBottomColor:'#87CEFA'}} > <View style={styles.icon} borderRightWidth={1} borderRightColor={'#87CEFA'}> <View style={{flexDirection:'row',alignItems:'center'}} > <Image source={require('./img/zan.jpg')} style={styles.imgIcon}></Image> </View> <Text style={styles.iconIcon}>41</Text> </View> <View style={styles.icon} borderRightWidth={1} borderRightColor={'#87CEFA'}> <View style={{flexDirection:'row',alignItems:'center'}} > <Image source={require('./img/comment.jpg')} style={styles.imgIcon}></Image> </View> <Text style={styles.iconIcon}>26</Text> </View> <View style={styles.icon} > <View style={{flexDirection:'row',alignItems:'center'}} > <Image source={require('./img/share.jpg')} style={styles.imgIcon}></Image> </View> <Text style={styles.iconIcon}>分享</Text> </View> </View> {/* 第四部分: 评论内容 */} <View style={{flexDirection:'row',justifyContent:'flex-start',alignItems:'center'}} > <View style={{flexDirection:'column',alignItems:'center'}}> <View style={{flexDirection:'row',paddingTop:10,paddingLeft:10}} > <Text style={{fontSize: 11,color:'#1C86EE'}}>刘邦2</Text> <Text style={{color:'#fff',fontSize: 11}}>回复</Text> <Text style={{fontSize: 11,color:'#1C86EE'}}>刘邦</Text> <Text style={{color:'#fff',fontSize: 11}}>:刘邦</Text> </View> <View style={{flexDirection:'row',paddingLeft:10,paddingBottom:10}} > <Text style={{fontSize: 11,fontSize: 11}}>:刘邦</Text> </View> </View> </View> </View> ); } } class JingxuanScreen extends React.Component { // 初始化模拟数据 constructor(props) { super(props); const ds = new ListView.DataSource({rowHasChanged: (r1,r2) => r1 !== r2}); this.state = { swiperShow:false,dataSource: ds.cloneWithRows([ '1','2','3','4','5','6','7','8' ]) }; } componentDidMount(){ setTimeout(()=>{ this.setState({ swiperShow:true }); },0) } render() { if(this.state.swiperShow){ return( <View style={[styles.containerSwiper]}> <Swiper style={styles.wrapper} horizontal={true} autoplay={true}> <View style={styles.slide1} title={<Text numberOfLines={1}>Aussie tourist dies at Bali hotel</Text>}> <Image resizeMode='cover' style={styles.imageSwiper} source={require('./img/1.jpg')} /> </View> <View style={styles.slide1} title={<Text numberOfLines={1}>Big lie behind Nine’s new show</Text>}> <Image resizeMode='cover' style={styles.imageSwiper} source={require('./img/2.jpg')} /> </View> <View style={styles.slide1} title={<Text numberOfLines={1}>Why Stone split from Garfield</Text>}> <Image resizeMode='cover' style={styles.imageSwiper} source={require('./img/3.jpg')} /> </View> <View style={styles.slide1} title={<Text numberOfLines={1}>Learn from Kim K to land that job</Text>}> <Image resizeMode='cover' style={styles.imageSwiper} source={require('./img/4.jpg')} /> </View> </Swiper> <View style={{flex:3}}> <ListView style={{flex:3}} dataSource={this.state.dataSource} renderRow={() => <COLL title='React Native2' detailTitle='React Native2'></COLL>} enableEmptySections={true} /> </View> </View> ) }else { return ( <View style={{height:100}}> </View> ); } } } class ShipinScreen extends React.Component { // 初始化模拟数据 constructor(props) { super(props); const ds = new ListView.DataSource({rowHasChanged: (r1,0) } render() { if(this.state.swiperShow){ return( <View style={[styles.containerSwiper]}> <ListView style={{flex:3}} dataSource={this.state.dataSource} renderRow={() => <COLL title='React Native2' detailTitle='React Native2'></COLL>} enableEmptySections={true} /> </View> ) }else { return ( <View style={{height:100}}> </View> ); } } } class RecentChatsScreen extends React.Component { // render() { // return ( // <View style={[styles.containerSwiper]}> // <View style={{flexDirection:'column',alignItems:'center'}}> // <Text style={{color:'#fff',fontSize: 14,textAlign:'center'}}>当前尚未登录</Text> // <Text style={{color:'#fff',textAlign:'center'}}>请点击界面登录</Text> // </View> // </View> // ); // } // 初始化模拟数据 constructor(props) { super(props); const ds = new ListView.DataSource({rowHasChanged: (r1,dataSource: ds.cloneWithRows([ // 'John','Joel','James','Jimmy','Jackson','Jillian','Julie','Devin' ]) }; this.buttonTap();//初始化 } componentDidMount(){ setTimeout(()=>{ this.setState({ swiperShow:true }); },0) } buttonTap=()=>{ fetch( 'http://bbs.reactnative.cn/api/category/3' ).then((response)=>response.json()) .then((jsondata) =>{ console.log(jsondata); const ds = new ListView.DataSource({rowHasChanged: (r1,r2) => r1 !== r2}); this.setState({dataSource: ds.cloneWithRows(jsondata.topics)}); this.setState({title:jsondata.description}); //alert(jsondata); }) .catch((error)=>{ alert(error); console.warning(error); }); }; render() { if(this.state.swiperShow){ return( <View style={[styles.containerSwiper]}> <ListView style={{flex:8} } removeClippedSubviews={false} dataSource={this.state.dataSource} renderRow={(rowData) => <CELL title={rowData.title} detailTitle={rowData.timestampISO}></CELL>} enableEmptySections={true} /> </View> ) }else { return ( <View style={{height:100}}> </View> ); } } } //排行版类 class CHLL extends Component{ constructor(props){ super(props); } render() { return ( //第一部分:信息部分，里面分为3个列，沿着水平轴排列 <View style={{flexDirection:'row',padding:8,borderBottomColor:'#121212'}}> {/*头像*/} <View style={{flexDirection: 'row',justifyContent:'flex-end'}} > <Image source={require('./img/profile.jpg')} style={styles.imgProfile} marginRight={15}></Image> </View> {/*作者信息和发布时间/观看信息*/} <View style={{flexDirection:'row',flex:5,textAlign:'left'}}>马尔塞里奥</Text> <Text style={{flex:1,color:'#787878',textAlign:'left'}}>宝马M2 2016款 AMG A 45</Text> </View> <View style={{flexDirection:'column',justifyContent:'flex-end'}} > <Text style={{flex:1,textAlign:'right'}}>1</Text> <Text style={{flex:1,textAlign:'right'}}>4.59s</Text> </View> </View> </View> ); } } class AllContactsScreen extends React.Component { // 初始化模拟数据 constructor(props) { super(props); const ds = new ListView.DataSource({rowHasChanged: (r1,'8','9','10','11','12' ]) }; } render() { return( <View style={[styles.containerSwiper]}> <ListView style={{flex:8} } removeClippedSubviews={false} dataSource={this.state.dataSource} renderRow={(rowData) => <CHLL title='React Native2'></CHLL>} enableEmptySections={true} /> </View> ) } } export const MainScreenNavigator = TabNavigator({ 精选: { screen: JingxuanScreen },最新: { screen: ShipinScreen },关注: { screen: RecentChatsScreen },排行榜: { screen: AllContactsScreen },}); const styles = StyleSheet.create({ container: { flex: 1,paddingTop: 22 },item: { padding: 10,fontSize: 18,height: 44,},image: { height: 300,width:300,txt: { textAlign: 'center',textAlignVertical: 'center',color: 'white',fontSize: 30,containerList:{ flex:3,backgroundColor: '#363636',containerSwiper: { flex:1,backgroundColor:'#363636' },wrapper: { },slide: { flex: 1,justifyContent: 'center',backgroundColor: 'transparent' },slide1: { flex: 1,alignItems: 'center',backgroundColor: '#9DD6EB',height:100 },slide2: { flex: 1,backgroundColor: '#97CAE5' },slide3: { flex: 1,backgroundColor: '#92BBD9' },text: { color: '#fff',fontWeight: 'bold' },imageSwiper: { width:width,height:150 },imgProfile: { width:40,height:40,borderRadius:20 },icon: { flex:1,flexDirection:'row',padding:10 },iconIcon: { flex:1,textAlign:'left',paddingLeft:5 },imgIcon : { width:20,height:20,borderRadius:5 },backgroundVideo: { position: 'absolute',width:width,height:200,} }) export default class App extends React.Component { render() { return <MainScreenNavigator />; } }