スクロール時にStackNavigatorヘッダーの不透明度を変更するにはどうすればよいですか？

Question

私は自分のアプリでreact-nativeとreact-navigationを使用していますが、現在はスクロールピクセルに比べて（自分のStackNavigatorの）ヘッダーの不透明度を変更しようとしています。

これは、現時点では私のヘッダのスタイルです：

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

ヘッダが不可視であるべきで、ピクセル、ユーザーがスクロールあたりより多くの目に見える取得する必要があります。多分50または100ピクセル後にヘッダーの不透明度は1になるはずです。

Answer 1

私は同じアイデアに興味があります。私は、ユーザーが下にスクロールすると、ヘッダーの背景色を変更したい。私はアニメーションAPIを使用していますが、警告が表示され続けると動作しません。これが私が試みたものです。私は、次のコードを持っている画面で

：

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> 
..... 
} 

Iは、以下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を