...
|
...
|
@@ -98,50 +98,14 @@ class UserNavBar extends React.Component { |
|
|
|
|
|
this.renderBackButton = this.renderBackButton.bind(this);
|
|
|
this.renderRightButton = this.renderRightButton.bind(this);
|
|
|
this.setAnimationValue = this.setAnimationValue.bind(this);
|
|
|
this.headerColor = this.headerColor.bind(this);
|
|
|
}
|
|
|
|
|
|
componentDidMount() {
|
|
|
this._listener = this.props.scrollValue.addListener(this.setAnimationValue);
|
|
|
}
|
|
|
|
|
|
componentWillUnmount() {
|
|
|
this.props.scrollValue.removeListener(this._listener);
|
|
|
}
|
|
|
|
|
|
setAnimationValue({ value, }) {
|
|
|
if (value >= 0 && value <= 2) {
|
|
|
|
|
|
if (value > 0.5 && value < 1) {
|
|
|
value = value + 0.1;
|
|
|
}
|
|
|
|
|
|
this.headerView.setNativeProps({
|
|
|
style: {
|
|
|
backgroundColor: this.headerColor(value),
|
|
|
},
|
|
|
});
|
|
|
|
|
|
// value = value > 1 ? 1 : value;
|
|
|
// this.image.setNativeProps({
|
|
|
// style: {
|
|
|
// opacity: value,
|
|
|
// },
|
|
|
// });
|
|
|
}
|
|
|
}
|
|
|
componentWillUnmount() {
|
|
|
|
|
|
//color between rgb(255,255,255) and rgb(0,0,0)
|
|
|
headerColor(progress) {
|
|
|
const red = 255 + (0 - 255) * progress;
|
|
|
const green = 255 + (0 - 255) * progress;
|
|
|
const blue = 255 + (0 - 255) * progress;
|
|
|
if (progress > 1) {
|
|
|
return `rgb(0, 0, 0)`; //`darkgray`
|
|
|
} else {
|
|
|
return `rgba(${red}, ${green}, ${blue}, ${progress})`;
|
|
|
}
|
|
|
}
|
|
|
|
|
|
renderBackButton() {
|
...
|
...
|
@@ -192,6 +156,16 @@ class UserNavBar extends React.Component { |
|
|
}
|
|
|
|
|
|
render() {
|
|
|
let interpolatedColor = this.props.scrollValue.interpolate({
|
|
|
inputRange: [0, 64],
|
|
|
outputRange: ['rgba(255, 255, 255, 0)', 'rgba(255, 255, 255, 1)'],
|
|
|
extrapolate: 'clamp'
|
|
|
});
|
|
|
let interpolatedOpacity = this.props.scrollValue.interpolate({
|
|
|
inputRange: [0, 64],
|
|
|
outputRange: [0, 1],
|
|
|
extrapolate: 'clamp'
|
|
|
});
|
|
|
return (
|
|
|
<Animated.View
|
|
|
ref={(c) => {
|
...
|
...
|
@@ -199,17 +173,18 @@ class UserNavBar extends React.Component { |
|
|
}}
|
|
|
style={[
|
|
|
styles.header,
|
|
|
{backgroundColor: interpolatedColor}
|
|
|
]}
|
|
|
>
|
|
|
<Image
|
|
|
<Animated.Image
|
|
|
ref={(c) => {
|
|
|
this.image = c;
|
|
|
}}
|
|
|
source={this.getNavBarBackgroundImage(this.props.channel)}
|
|
|
style={[styles.image, {opacity: 0,}]}
|
|
|
style={[styles.image, {opacity: interpolatedOpacity}]}
|
|
|
>
|
|
|
|
|
|
</Image>
|
|
|
</Animated.Image>
|
|
|
{this.renderBackButton()}
|
|
|
{this.renderRightButton()}
|
|
|
</Animated.View>
|
...
|
...
|
|