ci此文章为介绍react360全景视图搭建的介绍,
1,首先本地需要安装node 毕竟react 360是运行在浏览器上的,打包代码是要依赖node的.
官方介绍:
Mac: mac上推荐使用homebrew来安装ndoe
Windows: 推荐使用nodejs.org下载安装
Linux: 推荐使用nodejs.org package manager页面,找到对应你的linux版本的node
2,reactvr项目 cli 打开终端 输入命令行npm install react-vr-cli
这一步会生成一个初始化的文件 package.json
3,输入命令 npx react-vr-cli init react360
这一步生成项目文件与各种配置依赖,react-360为项目起的名字。结构大概是这个样子;
4,然后cd react360 进入项目文件夹 运行npm start启动 就可以看到基础的reactVR视图了
当然这个是我优化过的, 下面解释附加的操作。添加的几个按钮页面切换
5,首先建立一个components文件夹,
文件夹里面建立Button.js ButtonList.js Canvas.js 三 个js文件夹
上代码:首先是index.vr.js, 把默认的模块pano删除掉定义自己的canvas模块
export default class react360 extends React.Component {
constructor(){
super()
this.state = {
src: "reactconf_00.jpg"
}
}
render() {
return (
<View>
<Canvas src={this.state.src} />
<ButtonList onClick={(src) => {
this.setState({
src:src
})
}}></ButtonList>
</View>
);
}
};
引入react与component模块, 引入asset与pano(这个是加载360用的) 最后把整个模块 export出去
import React,{Component} from 'react'
import { asset,Pano} from 'react-vr'
class Canvas extends Component {
constructor(props) {
super(props)
this.state = {
src: this.props.src
}
}
render () {
return(
<Pano source={asset(this.props.src)} />
)
}
}
export default Canvas
button.js模块建立button.js animate为划过动画属性 easing为动画插件 npm直接安装
import React, { Component } from 'react'
import { Animated, asset, Image, View, VrButton } from 'react-vr'
const Easing = require('Easing')
class Button extends Component {
constructor(props) {
super(props)
this.state = {
animatedTranslation: new Animated.Value(0)
}
}
animateIn = () => {
Animated.timing(
this.state.animatedTranslation,
{
toValue:0.125,
duration:100,
easing:Easing.in
}
).start()
}
animateOut = () => {
Animated.timing(
this.state.animatedTranslation,
{
toValue:0,
duration:100,
easing:Easing.In
}
).start()
}
render(){
return(
<Animated.View
style={{
alignItems:'center',
flexDirection:'row',
margin:0.0125,
transform:[
{
translateZ: this.state.animatedTranslation
}
],
width:0.7
}}
>
<VrButton
onClick = {() => {this.props.onClick() }}
onEnter = {this.animateIn}
onExit = {this.animateOut}
>
<Image
style={{
width:0.3,
height:0.3
}}
source={asset(this.props.src)}>
</Image>
</VrButton>
</Animated.View>
)
}
}
export default Button
最后是buttonlist.js 引入 引入button组件引入 需要的全景图片与button图片 加载button组件
import React,{ Component } from 'react'
import {View} from 'react-vr'
import Button from './Button'
class ButtonList extends Component {
constructor(props) {
super()
this.state = {
buttons:[
{
key:0,imageSrc:'reactconf_00.jpg',buttonSrc:'button-00.png'
},
{
key:1,imageSrc:'reactconf_01.jpg',buttonSrc:'button-01.png'
},
{
key:2,imageSrc:'reactconf_02.jpg',buttonSrc:'button-02.png'
},
{
key:3,imageSrc:'reactconf_03.jpg',buttonSrc:'button-03.png'
}
]
}
}
render(){
return(
<View
style={{
flexDirection:'row',
flexWrap:'wrap',
transform:[
{ rotateX:-12},
{ translate: [-1.5,0,-3]}
],
width:3
}}
>
{
this.state.buttons.map(v => {
return (<Button src={v.buttonSrc} key={v.key} onClick={()=> {
this.props.onClick(v.imageSrc)
}}></Button>)
})
}
</View>
)
}
}
export default ButtonList
最后总结,
react constructor r一定要先调用super 不然值是传递不过来的,
框架的发展都是为解放劳动力 的, 用久了肯定是经过检验的更实用,
加油~~~