は、ナビゲーションに反応 - カスタムヘッダーアニメーション

Question

私は内部のネイティブアプリケーションを反応させ、私はこのような私のルート

のためにカスタムヘッダー・コンポーネントを作成したナビゲーションを反応させるの使用しています：

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

カスタムヘッダーコンポーネントネイティブを使用してアニメーションが機能しない 私はここで同じヘッダーでアニメーションを達成する方法を知りたいですhttps://reactnavigation.org/

Answer 1

TL：DR;はアニメーションを共有する解決策を見つけました。

Animated Custom Header React-native + React navigation

このポストはしばらくの間、私をばかにして - 私は同じ問題に直面しました。 D

最初の問題はこれでした。私の例ではカスタムヘッダーのコンポーネントを作成しました。ターゲットにはStackNavigatorページが1つあり、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