反应视差滚动视频背景

时间:2019-01-30 11:16:18

标签: node.js reactjs native parallax

我尝试将模块react-native-parallax-scroll-view用于具有视频背景的视差滚动内容。在React中,我很新鲜。

我正在使用以下模块:https://github.com/i6mi6/react-native-parallax-scroll-view

我的代码:

import React from 'react';
import ReactDOM from 'react-dom';
import ParallaxScrollView from 'react-native-parallax-scroll-view';

class ParallaxComponent extends React.Component {
  render() {
    return (
     <div fluid style={{ marginTop: '61px', overflow: 'hidden', boxSizing: 'context-box' }}>
          <ParallaxImage />
    </div>
    )
  }
}

class ParallaxImage extends React.Component {
    render() {
      return (
        <ParallaxScrollView
          backgroundColor="blue"
          contentBackgroundColor="pink"
          parallaxHeaderHeight={300}
          renderForeground={() => (
            <video autoPlay loop id="video-background" muted plays-inline style={{width:"100%",height:"100%"}}>
              <source src="./backgroung_massage.mp4" type="video/mp4" />
            </video>
          )}>
          <View style={{ height: 500 }}>
            <Text>Scroll me</Text>
          </View>
        </ParallaxScrollView>
      );
    }
}

ReactDOM.render(
    <div>
        <ParallaxComponent/>
    </div>,
  document.getElementById('app')
);

错误:

 ERROR in ./node_modules/react-native-parallax-scroll-view/src/index.js 14:26
 Module parse failed: Unexpected token (14:26)
 You may need an appropriate loader to handle this file type.
 | const pivotPoint = (a, b) => a - b
 |
 > const renderEmpty = () => <View />
 |
 | const noRender = () => <View style={{ display: 'none' }} />
  @ ./src/index.js 21:0-67 67:33-51
  @ multi (webpack)-dev-server/client?http://0.0.0.0:3000 (webpack)/hot/dev-serve
 r.js ./src/index.js

错误在哪里?我没主意在互联网上我找不到任何解决方案。

0 个答案:

没有答案