React Navigation - 自定义标题动画答案

【问题标题】：React Navigation - Custom Header AnimationReact Navigation - 自定义标题动画
【发布时间】：2017-07-05 13:46:10
【问题描述】：

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

像这样：

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

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

【问题讨论】：

标签： reactjs react-native react-navigation

【解决方案1】：

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

Animated Custom Header React-native + React navigation

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

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

类似的问题，页眉和页面之间的信息交换也应该对你有所帮助，就这样吧。

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 ... 

    <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 ...

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

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 (

        <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 ... 
    } 
}

这里！最后！演示！ Animated Custom Header React-native + React navigation

【讨论】：

确认工作。但请记住使用 useNativeDriver 来提高性能。

【解决方案2】：

我发布了react-navigation-collapsible。

希望对你有所帮助。

https://github.com/benevbright/react-navigation-collapsible

【讨论】：