首页 文章

反应导航 - 自定义 Headers 动画

提问于
浏览
2

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

像这样 :

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

当使用自定义 Headers 组件时,本机动画无法正常工作我想知道如何在 Headers 中实现与此处相同的动画https://reactnavigation.org/

2 回答

  • 3

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

    Animated Custom Header React-native + React navigation

    这篇文章让我嘲讽了一段时间 - 我遇到了同样的问题 . 希望即使几个月之后,这也会到达你: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 ... 
    
        <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 ...
    

    所以这是 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 (
    
            <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

  • 1

    我发表了 react-navigation-collapsible .

    我希望它会有所帮助 .

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

相关问题