java 自定义 headers_反应导航 - 自定义 Headers 动画

TL:DR; 找到了共享动画的解决方案 . 下面的屏幕代码上的值/插值 .

这篇文章让我嘲讽了一段时间 - 我遇到了同样的问题 . 希望即使几个月之后，这也会到达你：D

所以首先我的问题是这个，我为自定义 Headers 创建了一个组件，就像你的例子中一样，我的目标是有一个StackNavigator页面，有一个scrollView，它会依次操纵 Headers 的颜色 .

类似的问题， Headers 和页面之间的信息交换也应该对你有所帮助 .

Header.js

export class HeaderBar extends Component {

componentWillMount(){

// might be a bit, ehm but worked so if you have tips how to make the code nice feel free to share

let valueToManipulate= new Animated.Value(0);

this.props.navigation.setParams({

valueToManipulate,

customkey: valueToManipulate.interpolate({

inputRange: [0, 150],

outputRange: ['rgba(0,0,0,0)', 'rgba(0,0,0,1)'],

extrapolate: 'clamp',

})

})

}

render () {

... bit of code ...

// important bit for data binding !

if( ! (this.props.navigation.state.params && this.props.navigation.state.params.customkey) ){

return null;

}

/* unless that variable on params exists we do not ! render */

... bit more of code ...

/// <

... and rest of render ...

所以这是 Headers 位，现在是另一个“有趣”的部分：

HomePage.js

export default class HomePage extends Component {

... stufff..... :D

render() {

/* this here, again data binding !, do not let render before we have this var in state params ! */

if( !( this.props.navigation.state.params && this.props.navigation.state.params.valueToManipulate ) )

return null;

return (

style={styles.container}

onScroll={ Animated.event(

[{ nativeEvent: { contentOffset: { y: this.props.navigation.state.params.valueToManipulate } } }], //

)}

bounces={false}

scrollEventThrottle={1}

showsVerticalScrollIndicator={false}

showsHorizontalScrollIndicator={false}

>

... moar stuff ...

}

}