React Navigation - 自定义标题动画

Question

我在 React Native App 中使用 React Navigation，并为我的路由创建了一个自定义标题组件

像这样 ：

const Router = StackNavigator({
 Main: {
     screen: Main,
     navigationOptions: ({navigation}) => ({
         header:<Header title="Main"/>
     })
   },
})

当使用自定义标题组件时，本机动画不起作用我想知道如何在标题中实现与此处相同的动画https://reactnavigation.org/

Answer 1

TL：博士；找到了在下面的屏幕代码上共享动画值/插值的解决方案。

动画自定义标题 React-native + React 导航

这篇文章嘲笑了我一段时间 - 我也面临着同样的问题。希望这会在几个月后到达您手中：D

所以首先我的问题是，我为自定义标题制作了一个组件，就像在你的例子中一样，我的目标是有一个 StackNavigator 页面，有一个滚动视图，它会反过来操纵标题的颜色。

类似的问题，标题和页面之间的信息交换也应该对您有所帮助，就在这里。

头文件.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 ... 

    <View style={ floating }>
            <Animated.View style={{backgroundColor: this.props.navigation.state.params.customkey  }}> /// <<--- typical bind 
                <View style={{flexDirection: 'row', justifyContent: "space-between"}}>

     ... and rest of render ... 

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

主页.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 (

        <ScrollView
            style={styles.container}
            onScroll={ Animated.event(
                [{ nativeEvent: { contentOffset: { y: this.props.navigation.state.params.valueToManipulate } } }], // <-- tadaaa
            )}
            bounces={false}
            scrollEventThrottle={1}
            showsVerticalScrollIndicator={false}
            showsHorizontalScrollIndicator={false}
        >
      ... moar stuff ... 
    } 
}

和这里 ！最后 ！一个演示！ 动画自定义标题 React-native + React 导航