【发布时间】:2018-10-03 05:35:56
【问题描述】:
大家好,我正在学习在滚动时创建反应原生动画,当我添加 const headerHeight 时,我得到了这样的错误, 我按照 youtube 上的教程,在视频中没有错误,但在我的脚本中我得到了 error bangsad
完整代码
import React, {Component} from 'react'
import {View, Text, ScrollView, Image, Animated} from 'react-native';
console.disableYellowBox = true;
const HEADER_MAX_HEIGHT=120;
const HEADER_MIN_HEIGHT=70;
const PROFILE_MAX_HEIGHT=80;
const PROFILE_MIN_HEIGHT=40;
export default class Home extends Component {
constructor(props) {
super(props);
this.state = {
scrollY: new Animated.Value(0)
}
}
render() {
const headerHeight = this.state.scrollY.interpolate({
inputRange: [0,HEADER_MAX_HEIGHT-HEADER_MIN_HEIGHT],
ouputRange: [HEADER_MAX_HEIGHT,HEADER_MIN_HEIGHT],
extrapolate:'clamp'
})
return (<View style={{
flex:1
}}>
<Animated.View style={{
top:0,
left:0,
right:0,
height:headerHeight,
position:'absolute',
backgroundColor:'skyblue'
}}></Animated.View>
<ScrollView style={{
flex: 1
}}
scrollEventThrottle={16}
onScroll={Animated.event(
[{nativeEvent:{contentOffset: {y: this.state.scrollY}}}])}>
<View style={{
height:PROFILE_MAX_HEIGHT,
width:PROFILE_MAX_HEIGHT,
borderRadius:PROFILE_MAX_HEIGHT/2,
overFlow:'hidden',
marginTop:HEADER_MAX_HEIGHT-PROFILE_MAX_HEIGHT/2,
borderWith:4,
borderColor:'white',
marginLeft:11
}}>
<Image source={require('./assets/me.jpg')} style={{
borderWith:4,
borderColor:'white',
height:PROFILE_MAX_HEIGHT,
width:PROFILE_MAX_HEIGHT,
borderRadius:PROFILE_MAX_HEIGHT/2,
}}/>
</View>
<View>
<Text style={{
fontWeight:'bold',
fontSize:18,
paddingLeft:11
}}>Nagacoder</Text>
</View>
</ScrollView>
</View>)
}
}
这是我的 react 原生版本
"native-base": "2.4.2", "react": "16.3.1", "react-native": "0.55.2",
工业。自 1500 年代以来,Lorem Ipsum 一直是行业的标准虚拟文本,当时一位不知名的印刷商采用了一种类型的厨房并将其加扰以制作类型样本书。它不仅经历了五个世纪,而且经历了电子排版的飞跃,基本保持不变。它在 1960 年代随着包含 Lorem Ipsum 段落的 Letraset 表的发布而得到普及,最近还通过 Aldus PageMaker 等桌面出版软件(包括 Lorem Ipsum 版本)得到普及
【问题讨论】:
-
发布您的代码。
-
我们错过了很多可以帮助您的信息。代码在哪里?不要认为仅仅声明一个变量会破坏你的代码。请给我们更多信息。
-
请包括源代码的相关部分。
-
看到我的代码更新了,
标签: javascript arrays reactjs react-native