Wie ändert sich die Opazität der StackNavigator-Kopfzeile beim Scrollen?

Question

Ich benutze react-native und react-navigation in meiner App und versuche derzeit, die Deckkraft der Kopfzeile (von meinem StackNavigator) relativ zu den Bildlaufpixel zu ändern.

Das ist mein Kopf Stil im Moment:

headerStyle: { 
    position: 'absolute', 
    backgroundColor: 'transparent', 
    zIndex: 100, 
    top: 0, 
    left: 0, 
    right: 0, 
    borderBottomWidth: 0, 
    elevation: 0, 
}, 

Der Header unsichtbar sein sollte und mehr sichtbar pro Pixel des Benutzer gescrollt erhalten. Nach vielleicht 50 oder 100 Pixeln sollte der Header eine Opazität von 1 haben.

Answer 1

Ich bin an der gleichen Idee interessiert. Ich möchte die Hintergrundfarbe der Kopfzeile ändern, während der Benutzer nach unten scrollt. Ich benutze die animierte API, bekomme aber immer eine Warnung und die Dinge funktionieren nicht. Das habe ich versucht.

Im Bildschirm ich den folgenden Code haben:

constructor(props) { 
    super(props); 
    this.scrollY = new Animated.Value(0); 
    } 

    componentWillMount() { 
    this.props.navigation.setParams({ 
     bgColor: this.scrollY.interpolate({ 
     inputRange: [0, SCREEN_HEIGHT/2 - 40], 
     outputRange: ['transparent', 'rgb(255,255,255)'], 
     extrapolate: 'clamp', 
     }), 
    }); 
    } 

    render() { 
    return (
     <ScrollView 
     style={{ backgroundColor: 'black' }} 
     contentContainerStyle={{ flexGrow: 1 }} 
     onScroll={Animated.event([ 
      { nativeEvent: { contentOffset: { y: this.scrollY } } }, 
     ])} 
     scrollEventThrottle={16} 
     > 
     <View> 
..... 
} 

Ich habe auch folgende navigationOptions:

navigationOptions: ({ navigation }) => ({ 
    tabBarVisible: false, 
    headerStyle: { 
     position: 'absolute', 
     top: 0, 
     left: 0, 
     right: 0, 
     backgroundColor: !navigation.state.params 
     ? 'transparent' 
     : navigation.state.params.bgColor, 
     borderBottomWidth: 0, 
     elevation: 0, 
    }, 
    }), 

Warning Warning-cont