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

源码：

/** * 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 @H_301_13@style={{flexDirection: 'column',backgroundColor:'#363636'}}> <View @H_301_13@style={{flexDirection: 'row',padding:10,justifyContent:'center',flex:1,alignItems:'center'}} > <Text @H_301_13@style={{flex:2,marginLeft:10,marginRight:10,color:'#fff',fontSize: 15}} >{this.props.title}</Text> <Text @H_301_13@style={{flex:1,fontSize: 12,textAlign:'right'}}>{this.props.detailTitle}</Text> </View> <View @H_301_13@style={{height:.5,alignSelf:'stretch',backgroundColor:'gray'}}></View> </View> ); } } //视频列表类 class COLL extends Component{ constructor(props){ super(props); this.state = { detailTitle:'aaaa'}; } render(){ return( /*总体的布局，沿着竖轴排列*/ <View @H_301_13@style={{flexDirection:'column',backgroundColor:'#363636',borderBottomWidth:3,borderBottomColor:'#121212'}}> {/* 第一部分:信息部分，里面分为3个列，沿着水平轴排列 */} <View @H_301_13@style={{flexDirection:'row',alignItems:'center'}} > {/*头像*/} <View @H_301_13@style={{flexDirection: 'row',flex:1}} > <Image @H_301_13@source={require('./@H_301_13@img/@H_301_13@profile.jpg')} @H_301_13@style={styles.imgProfile}></Image> </View> {/*作者信息和发布时间/观看信息*/} <View @H_301_13@style={{flexDirection:'row',flex:6,alignItems:'center'}} > {/* 作者信息 */} <View @H_301_13@style={{flexDirection:'column',justifyContent:'flex-start'}} > <Text @H_301_13@style={{flex:1,color:'#1C86EE',textAlign:'left'}}>刘邦</Text> <Text @H_301_13@style={{flex:1,fontSize: 10,textAlign:'left'}}>Duang</Text> </View> {/* 发布时间/观看信息 */} <View @H_301_13@style={{flexDirection:'column',justifyContent:'flex-end'}} > {/* 发布时间 */} <Text @H_301_13@style={{flex:1,textAlign:'right'}}>4天前</Text> {/* 观看 */} <View @H_301_13@style={{flexDirection:'row',justifyContent:'flex-end',flex:1}} > <Text @H_301_13@style={{flex:4}}></Text> <Image @H_301_13@source={require('./@H_301_13@img/@H_301_13@view.png')} @H_301_13@style={{width:16,height:16}}></Image> <Text @H_301_13@style={{flex:1,textAlign:'left'}}>4563</Text> </View> </View> </View> </View> {/* 第二部分:视频 就一个View*/} <View @H_301_13@style={{flexDirection:'row',alignItems:'center'}} > {/* <Image @H_301_13@source={require('./@H_301_13@img/@H_301_13@profile.jpg')} @H_301_13@style={{width:width,height:150}}></Image> */} <Video @H_301_13@ref="myvideo" @H_301_13@source={{uri:"http://clips.vorwaerts-gmbh.de/big_buck_bunny.mp4"}} @H_301_13@style={{width:width,height:180,top: 0,left: 0,bottom: 0,right: 0,}} @H_301_13@rate={1.0} // @H_301_13@0 @H_301_13@is @H_301_13@paused,@H_301_13@1 @H_301_13@is @H_301_13@normal. @H_301_13@volume={1.0} // @H_301_13@0 @H_301_13@is @H_301_13@muted,@H_301_13@1 @H_301_13@is @H_301_13@normal. @H_301_13@muted={false} // @H_301_13@Mutes @H_301_13@the @H_301_13@audio @H_301_13@entirely. @H_301_13@paused={false} // @H_301_13@Pauses @H_301_13@playback @H_301_13@entirely. @H_301_13@resizeMode="cover" // @H_301_13@Fill @H_301_13@the @H_301_13@whole @H_301_13@screen @H_301_13@at @H_301_13@aspect @H_301_13@ratio.* @H_301_13@repeat={true} // @H_301_13@Repeat @H_301_13@forever. @H_301_13@playInBackground={false} // @H_301_13@Audio @H_301_13@continues @H_301_13@to @H_301_13@play @H_301_13@when @H_301_13@app @H_301_13@entering @H_301_13@background. @H_301_13@playWhenInactive={false} // [@H_301_13@iOS] @H_301_13@Video @H_301_13@continues @H_301_13@to @H_301_13@play @H_301_13@when @H_301_13@control @H_301_13@or @H_301_13@notification @H_301_13@center @H_301_13@are @H_301_13@shown. @H_301_13@ignoreSilentSwitch={"ignore"} // [@H_301_13@iOS] @H_301_13@ignore | @H_301_13@obey @H_301_13@- @H_301_13@When '@H_301_13@ignore',@H_301_13@audio @H_301_13@will @H_301_13@still @H_301_13@play @H_301_13@with @H_301_13@the @H_301_13@iOS @H_301_13@hard @H_301_13@silent @H_301_13@switch @H_301_13@set @H_301_13@to @H_301_13@silent. @H_301_13@When '@H_301_13@obey',@H_301_13@audio @H_301_13@will @H_301_13@toggle @H_301_13@with @H_301_13@the @H_301_13@switch. @H_301_13@When @H_301_13@not @H_301_13@specified,@H_301_13@will @H_301_13@inherit @H_301_13@audio @H_301_13@settings @H_301_13@as @H_301_13@usual. @H_301_13@progressUpdateInterval={250.0} // [@H_301_13@iOS] @H_301_13@Interval @H_301_13@to @H_301_13@fire @H_301_13@onProgress (@H_301_13@default @H_301_13@to ~@H_301_13@250ms) @H_301_13@onLoadStart={this.loadStart} // @H_301_13@Callback @H_301_13@when @H_301_13@video @H_301_13@starts @H_301_13@to @H_301_13@load @H_301_13@onLoad={this.setDuration} // @H_301_13@Callback @H_301_13@when @H_301_13@video @H_301_13@loads @H_301_13@onProgress={this.setTime} // @H_301_13@Callback @H_301_13@every ~@H_301_13@250ms @H_301_13@with @H_301_13@currentTime @H_301_13@onEnd={this.onEnd} // @H_301_13@Callback @H_301_13@when @H_301_13@playback @H_301_13@finishes @H_301_13@onError={this.videoError} // @H_301_13@Callback @H_301_13@when @H_301_13@video @H_301_13@cannot @H_301_13@be @H_301_13@loaded @H_301_13@onBuffer={this.onBuffer} // @H_301_13@Callback @H_301_13@when @H_301_13@remote @H_301_13@video @H_301_13@is @H_301_13@buffering @H_301_13@onTimedMetadata={this.onTimedMetadata} // @H_301_13@Callback @H_301_13@when @H_301_13@the @H_301_13@stream @H_301_13@receive @H_301_13@some @H_301_13@Metadata /> </View> {/* 第三部分: 点赞评论分享 */} <View @H_301_13@style={{flexDirection:'row',alignItems:'center',borderBottomWidth:1,borderBottomColor:'#87CEFA'}} > <View @H_301_13@style={styles.icon} @H_301_13@borderRightWidth={1} @H_301_13@borderRightColor={'#87CEFA'}> <View @H_301_13@style={{flexDirection:'row',alignItems:'center'}} > <Image @H_301_13@source={require('./@H_301_13@img/@H_301_13@zan.jpg')} @H_301_13@style={styles.imgIcon}></Image> </View> <Text @H_301_13@style={styles.iconIcon}>41</Text> </View> <View @H_301_13@style={styles.icon} @H_301_13@borderRightWidth={1} @H_301_13@borderRightColor={'#87CEFA'}> <View @H_301_13@style={{flexDirection:'row',alignItems:'center'}} > <Image @H_301_13@source={require('./@H_301_13@img/@H_301_13@comment.jpg')} @H_301_13@style={styles.imgIcon}></Image> </View> <Text @H_301_13@style={styles.iconIcon}>26</Text> </View> <View @H_301_13@style={styles.icon} > <View @H_301_13@style={{flexDirection:'row',alignItems:'center'}} > <Image @H_301_13@source={require('./@H_301_13@img/@H_301_13@share.jpg')} @H_301_13@style={styles.imgIcon}></Image> </View> <Text @H_301_13@style={styles.iconIcon}>分享</Text> </View> </View> {/* 第四部分: 评论内容 */} <View @H_301_13@style={{flexDirection:'row',justifyContent:'flex-start',alignItems:'center'}} > <View @H_301_13@style={{flexDirection:'column',alignItems:'center'}}> <View @H_301_13@style={{flexDirection:'row',paddingTop:10,paddingLeft:10}} > <Text @H_301_13@style={{fontSize: 11,color:'#1C86EE'}}>刘邦2</Text> <Text @H_301_13@style={{color:'#fff',fontSize: 11}}>回复</Text> <Text @H_301_13@style={{fontSize: 11,color:'#1C86EE'}}>刘邦</Text> <Text @H_301_13@style={{color:'#fff',fontSize: 11}}>:刘邦</Text> </View> <View @H_301_13@style={{flexDirection:'row',paddingLeft:10,paddingBottom:10}} > <Text @H_301_13@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 @H_301_13@style={[styles.containerSwiper]}> <Swiper @H_301_13@style={styles.wrapper} @H_301_13@horizontal={true} @H_301_13@autoplay={true}> <View @H_301_13@style={styles.slide1} @H_301_13@title={<Text @H_301_13@numberOfLines={1}>Aussie tourist dies at Bali hotel</Text>}> <Image @H_301_13@resizeMode='cover' @H_301_13@style={styles.imageSwiper} @H_301_13@source={require('./@H_301_13@img/@H_301_13@1.jpg')} /> </View> <View @H_301_13@style={styles.slide1} @H_301_13@title={<Text @H_301_13@numberOfLines={1}>Big lie behind Nine’s new show</Text>}> <Image @H_301_13@resizeMode='cover' @H_301_13@style={styles.imageSwiper} @H_301_13@source={require('./@H_301_13@img/@H_301_13@2.jpg')} /> </View> <View @H_301_13@style={styles.slide1} @H_301_13@title={<Text @H_301_13@numberOfLines={1}>Why Stone split from Garfield</Text>}> <Image @H_301_13@resizeMode='cover' @H_301_13@style={styles.imageSwiper} @H_301_13@source={require('./@H_301_13@img/@H_301_13@3.jpg')} /> </View> <View @H_301_13@style={styles.slide1} @H_301_13@title={<Text @H_301_13@numberOfLines={1}>Learn from Kim K to land that job</Text>}> <Image @H_301_13@resizeMode='cover' @H_301_13@style={styles.imageSwiper} @H_301_13@source={require('./@H_301_13@img/@H_301_13@4.jpg')} /> </View> </Swiper> <View @H_301_13@style={{flex:3}}> <ListView @H_301_13@style={{flex:3}} @H_301_13@dataSource={this.state.dataSource} @H_301_13@renderRow={() => <COLL @H_301_13@title='React Native2' @H_301_13@detailTitle='React Native2'></COLL>} enableEmptySections={true} /> </View> </View> ) }else { return ( <View @H_301_13@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 @H_301_13@style={[styles.containerSwiper]}> <ListView @H_301_13@style={{flex:3}} @H_301_13@dataSource={this.state.dataSource} @H_301_13@renderRow={() => <COLL @H_301_13@title='React Native2' @H_301_13@detailTitle='React Native2'></COLL>} enableEmptySections={true} /> </View> ) }else { return ( <View @H_301_13@style={{height:100}}> </View> ); } } } class RecentChatsScreen extends React.Component { // render() { // return ( // <View @H_301_13@style={[styles.containerSwiper]}> // <View @H_301_13@style={{flexDirection:'column',alignItems:'center'}}> // <Text @H_301_13@style={{color:'#fff',fontSize: 14,textAlign:'center'}}>当前尚未登录</Text> // <Text @H_301_13@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 @H_301_13@style={[styles.containerSwiper]}> <ListView @H_301_13@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 @H_301_13@style={{flexDirection:'row',padding:8,borderBottomColor:'#121212'}}> {/*头像*/} <View @H_301_13@style={{flexDirection: 'row',justifyContent:'flex-end'}} > <Image @H_301_13@source={require('./@H_301_13@img/@H_301_13@profile.jpg')} @H_301_13@style={styles.imgProfile} @H_301_13@marginRight={15}></Image> </View> {/*作者信息和发布时间/观看信息*/} <View @H_301_13@style={{flexDirection:'row',flex:5,textAlign:'left'}}>马尔塞里奥</Text> <Text @H_301_13@style={{flex:1,color:'#787878',textAlign:'left'}}>宝马M2 2016款 AMG A 45</Text> </View> <View @H_301_13@style={{flexDirection:'column',justifyContent:'flex-end'}} > <Text @H_301_13@style={{flex:1,textAlign:'right'}}>1</Text> <Text @H_301_13@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 @H_301_13@style={[styles.containerSwiper]}> <ListView @H_301_13@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 />; } }