Реагируйте с навигацией - пользовательская анимация заголовка

Question

Я использую React Navigation внутри React Native App и создаю пользовательский компонент заголовка для своих маршрутов.

как это:

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

при использовании пользовательского компонента заголовка не работает нативная анимация, я хотел бы знать, как я могу добиться анимации в заголовке так же, как здесь https://reactnavigation.org/

Answer 1

TL:DR; нашел решение поделиться анимацией. Значение / интерполяция по экранам кода ниже.

Анимированный пользовательский заголовок 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 ... 
    } 
}

И здесь! В заключение! Демо! Анимированный пользовательский заголовок React-native + React navigation

Answer 2

Я опубликовал react-navigation-collapsible,

Я надеюсь, что это будет полезно.

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