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

r囧r小猫 2022-06-04 07:10 163阅读 0赞

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

**源码**：

/** * 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,marginRight:10,color:'#fff',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',padding:10, justifyContent:'center',flex:1,alignItems:'center'}} > {/*头像*/} <View style={ { flexDirection: 'row',flex:1}} > <Image source={require('./img/profile.jpg')} style={styles.imgProfile}></Image> </View> {/*作者信息和发布时间/观看信息*/} <View style={ { flexDirection:'row',justifyContent:'center',flex:6,alignItems:'center'}} > {/* 作者信息 */} <View style={ { flexDirection:'column',flex:1,justifyContent:'flex-start'}} > <Text style={ { flex:1,color:'#fff',fontSize: 12,color:'#1C86EE',textAlign:'left'}}>刘邦</Text> <Text style={ { flex:1,color:'#fff',fontSize: 10,textAlign:'left'}}>Duang</Text> </View> {/* 发布时间/观看信息 */} <View style={ { flexDirection:'column',flex:1,justifyContent:'flex-end'}} > {/* 发布时间 */} <Text style={ { flex:1,color:'#fff',fontSize: 12,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,color:'#fff',fontSize: 10,textAlign:'left'}}>4563</Text> </View> </View> </View> </View> {/* 第二部分:视频 就一个View*/} <View style={ { flexDirection:'row',justifyContent:'center',flex:1,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',justifyContent:'center',flex:1,alignItems:'center',borderBottomWidth:1,borderBottomColor:'#87CEFA'}} > <View style={styles.icon} borderRightWidth={1} borderRightColor={'#87CEFA'}> <View style={ { flexDirection:'row',justifyContent:'flex-end',flex:1,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',justifyContent:'flex-end',flex:1,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',justifyContent:'flex-end',flex:1,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',flex:1,alignItems:'center'}} > <View style={ { flexDirection:'column',justifyContent:'flex-start',alignItems:'center'}}> <View style={ { flexDirection:'row',justifyContent:'flex-start',flex:1,alignItems:'center',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',justifyContent:'flex-start',flex:1,alignItems:'center',paddingLeft:10}} > <Text style={ { fontSize: 11,color:'#1C86EE'}}>刘邦</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',justifyContent:'flex-start',flex:1,alignItems:'center',paddingLeft:10,paddingBottom:10}} > <Text style={ { fontSize: 11,color:'#1C86EE'}}>刘邦</Text> <Text style={ { color:'#fff',fontSize: 11}}>回复</Text> <Text style={ { fontSize: 11,color:'#1C86EE'}}>刘邦</Text> <Text style={ { color:'#fff',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, 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]}> <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',justifyContent:'center',flex:1,alignItems:'center'}}> // <Text style={ { color:'#fff',fontSize: 14,textAlign:'center'}}>当前尚未登录</Text> // <Text style={ { color:'#fff',fontSize: 14,textAlign:'center'}}>请点击界面登录</Text> // </View> // </View> // ); // } // 初始化模拟数据 constructor(props) { super(props); const ds = new ListView.DataSource({rowHasChanged: (r1, r2) => r1 !== r2}); this.state = { swiperShow:false, 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, justifyContent:'center',flex:1,alignItems:'center',borderBottomWidth:3,borderBottomColor:'#121212'}}> {/*头像*/} <View style={ { flexDirection: 'row',flex:1,justifyContent:'flex-end'}} > <Image source={require('./img/profile.jpg')} style={styles.imgProfile} marginRight={15}></Image> </View> {/*作者信息和发布时间/观看信息*/} <View style={ { flexDirection:'row',justifyContent:'center',flex:5,alignItems:'center'}} > {/* 作者信息 */} <View style={ { flexDirection:'column',flex:1,justifyContent:'flex-start'}} > <Text style={ { flex:1,color:'#fff',fontSize: 14,textAlign:'left'}}>马尔塞里奥</Text> <Text style={ { flex:1,color:'#787878',fontSize: 12,textAlign:'left'}}>宝马M2 2016款 AMG A 45</Text> </View> <View style={ { flexDirection:'column',flex:1,justifyContent:'flex-end'}} > <Text style={ { flex:1,color:'#fff',fontSize: 14,textAlign:'right'}}>1</Text> <Text style={ { flex:1,color:'#1C86EE',fontSize: 12,textAlign:'right'}}>4.59s</Text> </View> </View> </View> ); } } class AllContactsScreen 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','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, justifyContent:'center', backgroundColor: '#363636', }, containerSwiper: { flex:1, backgroundColor:'#363636' }, wrapper: { }, slide: { flex: 1, justifyContent: 'center', backgroundColor: 'transparent' }, slide1: { flex: 1, justifyContent: 'center', alignItems: 'center', backgroundColor: '#9DD6EB', height:100 }, slide2: { flex: 1, justifyContent: 'center', alignItems: 'center', backgroundColor: '#97CAE5' }, slide3: { flex: 1, justifyContent: 'center', alignItems: 'center', backgroundColor: '#92BBD9' }, text: { color: '#fff', fontSize: 30, fontWeight: 'bold' }, imageSwiper: { width:width, height:150 }, imgProfile: { width:40, height:40, borderRadius:20 }, icon: { flex:1, flexDirection:'row', justifyContent: 'center', alignItems: 'center', padding:10 }, iconIcon: { flex:1, color:'#fff', fontSize: 10, textAlign:'left', paddingLeft:5 }, imgIcon : { width:20, height:20, borderRadius:5 }, backgroundVideo: { position: 'absolute', flex:1, width:width, height:200, top: 0, left: 0, bottom: 0, right: 0, } }) export default class App extends React.Component { render() { return <MainScreenNavigator />; } }