Question

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

像这样：

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

使用自定义标头组件时，原生动画无法正常工作我想知道如何在标题中实现与此处https://reactnavigation.org/

相同的动画

Answer 1

TL：DR; 找到解决方案，在下面的屏幕代码上分享animated.Value / interpolation。

Animated Custom Header React-native + React navigation

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

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

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

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

Answer 2

我发表了react-navigation-collapsible。

我希望这会有所帮助。

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

反应导航 - 自定义标题动画

2 个答案: