스크롤 할 때 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> 
..... 
} 

또한 다음 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

을