react-native 模仿Youtube界面

How to format a number as 2.5K if a thousand or more,otherwise 900 in javascript?
https://stackoverflow.com/questions/9461621/how-to-format-a-number-as-2-5k-if-a-thousand-or-more-otherwise-900-in-javascrip/9462382#9462382

https://www.youtube.com/yts/img/ringo/hitchhiker/logo_small_2x-vfl4_cFqn.png

https://randomuser.me/api/portraits/men/0.jpg

https://github.com/oblador/react-native-vector-icons

安装需要的组件：

$ brew install yarn && yarn add react-native-vector-icons

$ react-native link

import React,{Component} from 'react';
import {
StyleSheet,
Text,
View,
Image,
TouchableOpacity,
} from 'react-native';

import Icon from 'react-native-vector-icons/MaterialIcons';

export default class App extends Component {
render() {
return (
<View style={styles.container}>
<View style={styles.navBar}>
<Image source={{uri: 'https://www.youtube.com/yts/img/ringo/hitchhiker/logo_small_2x-vfl4_cFqn.png'}} style={{width: 98,height: 22}} />
<View style={styles.rightNav}>
<TouchableOpacity>
<Icon name='search' size={25} style={styles.navItem} />
</TouchableOpacity>
<TouchableOpacity>
<Icon name='account-circle' size={25} style={styles.navItem} />
</TouchableOpacity>
</View>
</View>
<View style={styles.body}>
</View>
<View style={styles.tabBar}>
<TouchableOpacity style={styles.tabItem}>
<Icon name='home' size={25} />
<Text style={styles.tabTitle}>Home</Text>
</TouchableOpacity>
<TouchableOpacity style={styles.tabItem}>
<Icon name='whatshot' size={25} />
<Text style={styles.tabTitle}>Trending</Text>
</TouchableOpacity>
<TouchableOpacity style={styles.tabItem}>
<Icon name='subscriptions' size={25} />
<Text style={styles.tabTitle}>Subscriptions</Text>
</TouchableOpacity>
<TouchableOpacity style={styles.tabItem}>
<Icon name='folder' size={25} />
<Text style={styles.tabTitle}>Library</Text>
</TouchableOpacity>
</View>
</View>
);
}
}

const styles = StyleSheet.create({
container: {
flex: 1,
},
navBar: {
height: 55,
backgroundColor: 'white',
elevation: 3,
paddingHorizontal: 15,
flexDirection: 'row',
alignItems: 'center',
justifyContent: 'space-between',
rightNav: {
flexDirection: 'row',
navItem: {
marginLeft: 25,
body: {
flex: 1,
tabBar: {
backgroundColor: 'white',
height: 60,
borderTopWidth: 0.5,
borderColor: '#e5e5e5',
justifyContent: 'space-around',
tabItem: {
alignItems: 'center',
justifyContent: 'center',
tabTitle: {
fontSize: 11,
color: '#3c3c3c',

})

代码中使用的数据源地址为：https://bin.codingislove.com/yitiyoxogo.json

打开以上链接复制返回的json数据新建一个data.json的数据文件保存返回json数据

app/components/VideoItem.js 文件的代码：

import React,
} from 'react-native';

import Icon from 'react-native-vector-icons/MaterialIcons';

export default class VideoItem extends Component {
render() {
let video = this.props.video;
return (
<View style={styles.container}>
<Image source={{uri: video.snippet.thumbnails.medium.url}} style={{height: 200}} />
<View style={styles.descContainer}>
<Image source={{uri: 'https://randomuser.me/api/portraits/men/0.jpg'}} style={{width: 50,height: 50,borderRadius: 25}} />
<View style={styles.videoDetails}>
<Text style={styles.videoTitle}>{video.snippet.title}</Text>
<Text style={styles.videoStats}>{video.snippet.channelTitle + " . " + nFormatter(video.statistics.viewCount,1) + ' . 3 months ago'}</Text>
</View>
<TouchableOpacity>
<Icon name='more-vert' size={25} color='#999999' />
</TouchableOpacity>
</View>
</View>
);
}
}

function nFormatter(num,digits) {
var si = [
{ value: 1,symbol: "" },
{ value: 1E3,symbol: "k" },
{ value: 1E6,symbol: "M" },
{ value: 1E9,symbol: "G" },
{ value: 1E12,symbol: "T" },
{ value: 1E15,symbol: "P" },
{ value: 1E18,symbol: "E" }
];
var rx = /\.0+$|(\.[0-9]*[1-9])0+$/;
var i;
for (i = si.length - 1; i > 0; i--) {
if (num >= si[i].value) {
break;
}
}
return (num / si[i].value).toFixed(digits).replace(rx,"$1") + si[i].symbol + ' views';
}

const styles = StyleSheet.create({
container: {
padding: 15,
descContainer: {
flexDirection: 'row',
paddingTop: 15,
videoDetails: {
paddingHorizontal: 15,
flex: 1,
videoTitle: {
fontSize: 16,
videoStats: {
fontSize: 14,
paddingTop: 3,

})

App.js 文件的代码：

import React,
FlatList,
} from 'react-native';

import Icon from 'react-native-vector-icons/MaterialIcons';
import VideoItem from './app/components/VideoItem';
import data from './data.json';

export default class App extends Component {
render(){
//'alert(data.kind);
return(
<View style={styles.container}>
<View style={styles.navBar}>
<Image source={{uri: 'https://www.youtube.com/yts/img/ringo/hitchhiker/logo_small_2x-vfl4_cFqn.png'}} style={{width: 98,height: 22}} />
<View style={styles.rightNav}>
<TouchableOpacity>
<Icon name='search' size={25} style={styles.navItem} />
</TouchableOpacity>
<TouchableOpacity>
<Icon name='account-circle' size={25} style={styles.navItem} />
</TouchableOpacity>
</View>
</View>
<View style={styles.body}>
<VideoItem video={data.items[0]} />
</View>
<View style={styles.tabBar}>
<TouchableOpacity style={styles.tabItem}>
<Icon name='home' size={25} />
<Text style={styles.tabTitle}>Home</Text>
</TouchableOpacity>
<TouchableOpacity style={styles.tabItem}>
<Icon name='whatshot' size={25} />
<Text style={styles.tabTitle}>Trending</Text>
</TouchableOpacity>
<TouchableOpacity style={styles.tabItem}>
<Icon name='subscriptions' size={25} />
<Text style={styles.tabTitle}>Subscriptions</Text>
</TouchableOpacity>
<TouchableOpacity style={styles.tabItem}>
<Icon name='folder' size={25} />
<Text style={styles.tabTitle}>Library</Text>
</TouchableOpacity>
</View>
</View>
);
}

}

const styles = StyleSheet.create({
container: {
flex: 1,
})

app/components/VideoItem.js 文件的代码：

import React,

})

App.js 文件的代码：

import React,{Component} from 'react';
import {
StyleSheet,
} from 'react-native';

import Icon from 'react-native-vector-icons/MaterialIcons';
import VideoItem from './app/components/VideoItem';
import data from './data.json';

export default class App extends Component {
render(){
//'alert(data.kind);
return(
<View style={styles.container}>
<View style={styles.navBar}>
<Image source={{uri: 'https://www.youtube.com/yts/img/ringo/hitchhiker/logo_small_2x-vfl4_cFqn.png'}} style={{width: 98,height: 22}} />
<View style={styles.rightNav}>
<TouchableOpacity>
<Icon name='search' size={25} style={styles.navItem} />
</TouchableOpacity>
<TouchableOpacity>
<Icon name='account-circle' size={25} style={styles.navItem} />
</TouchableOpacity>
</View>
</View>
<View style={styles.body}>
<FlatList
data={data.items}
renderItem={(video) => <VideoItem video={video.item} />}
keyExtractor={(item) => item.id}
ItemSeparatorComponent={() => <View style={{height: 0.5,backgroundColor: '#cccccc'}} />}
/>
</View>
<View style={styles.tabBar}>
<TouchableOpacity style={styles.tabItem}>
<Icon name='home' size={25} />
<Text style={styles.tabTitle}>Home</Text>
</TouchableOpacity>
<TouchableOpacity style={styles.tabItem}>
<Icon name='whatshot' size={25} />
<Text style={styles.tabTitle}>Trending</Text>
</TouchableOpacity>
<TouchableOpacity style={styles.tabItem}>
<Icon name='subscriptions' size={25} />
<Text style={styles.tabTitle}>Subscriptions</Text>
</TouchableOpacity>
<TouchableOpacity style={styles.tabItem}>
<Icon name='folder' size={25} />
<Text style={styles.tabTitle}>Library</Text>
</TouchableOpacity>
</View>
</View>
);
}

}

const styles = StyleSheet.create({
container: {
flex: 1,
navBar: {
height: 55,
rightNav: {
flexDirection: 'row',
navItem: {
marginLeft: 25,
body: {
flex: 1,
tabBar: {
backgroundColor: 'white',
tabItem: {
alignItems: 'center',
tabTitle: {
fontSize: 11,

})

react-native 模仿Youtube界面

相关推荐