react-native 模仿Youtube界面

React 前端之家
前端之家收集整理的这篇文章主要介绍了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相关文章

react使用moment进行日期格式化
导入moment 使用方式 年月日，时分秒 星期几 相对时间 7天后 2小时后 明天 将毫秒转换成年...
推荐使用并手写实现redux-actions原理
@ 一、前言 为什么介绍redux-actions呢? 第一次见到主要是接手公司原有的项目，发现有之前...
【译】值得推荐的十大React Hook 库
十大React Hook库 原文地址：https://dev.to/bornfightcompany/top-10-react-hook-librari...
React生命周期
React生命周期 React的生命周期从广义上分为挂载、渲染、卸载三个阶段，在React的整个生命...
React虚拟DOM的理解
React虚拟DOM的理解 Virtual DOM是一棵以JavaScript对象作为基础的树，每一个节点可以将其...
使用react-native-vector-icons（RN0.6+）
1.安装 npm install --save react-native-vector-icons or yarn add react-native-vector-...
React中的Props, State 与 render 函数
React 的核心特性总结 1、React：声明式开发 (JS或者jQuery属性命令式开发） 2、可以与其他...
React开发环境准备
react fiber 指react 16以上的版本 引入react的方式： 1、引入.js文件 2、使用脚手架工具（...
React组件拆分与传值
组件拆分与组件之间的传值 父子组件的概念： 父组件通过属性的方式，向自组件传值 子组件通...
React组件的简单演示
src/Test.js import React from &#39;react&#39;; function Test() { return ( &a...
HTMLHTML5JavaScriptCSSjQueryBootstrapAngularjsTypeScriptVueDojoJsonElectronNode.jsextjsExpress XMLES6AjaxFlashUnityReactFlexAnt DesignWeb前端微信小程序微信公众号
关闭广告单独headers封装代码提示错误整数正则非0开头跳页出页码antd table提示URL未注册公众号支付vue hash模式iSlider车牌键盘循环图片echarts 双折左右布局DllPlugin对象创建打字游戏圈选两栏云函数蒙版ES2020橱窗无缝滚动轮播色块碰撞组件销毁文档操作