我尝试将模块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
错误在哪里?我没主意在互联网上我找不到任何解决方案。