react-native - 如何将导航 Prop 传递给 "createStackNavigator"以使用带动画的默认标题

Question

在过去的几天里，我一直在为我的屏幕添加一个动画标题。我在这方面取得了成功，但是我现在想默认将其用作我的标题，而不是将代码复制并粘贴到我希望使用它的所有屏幕中。目前，动画标题在屏幕中实现如下:

要呈现标题:

static navigationOptions = ({ navigation }) => {
    return {
        header: () => {
            return (
                <SafeAreaView style={{
                    height: 0,
                    overflow: 'visible',
                }}>
                    <Animated.View style={{height: 80, width: 80,
                        transform: [ {translateY: navigation.getParam('headerScrollY', 0)}]
                    }}>
                        <TouchableOpacity style={{padding: 20}} onPress={() => navigation.goBack()}>
                            <Icon.Ionicons  style={{color: '#ffffff', width: 50, height: 50}} name={'ios-arrow-round-back'} size={50} />
                        </TouchableOpacity>
                    </Animated.View>
                </SafeAreaView>
            )
        }
    }
};

要设置状态:

constructor() {
    super();
    this.state = {
        headerScrollY: new Animated.Value(0),
    };
}

设置动画插值
并将值传递给导航 Prop (这是我稍后渲染标题时必须访问的内容)

componentWillMount() {
    this.props.navigation.setParams({
        headerScrollY: this.state.headerScrollY.interpolate({
            inputRange: [0, 80],
            outputRange: [0, -80],
        })
    });
}

带有“scrollView”的主渲染方法调用“onScroll”事件来获取滚动 Action

render() {
    return (
            <ScrollView
                style={Styles.wholePageContainer}
                showsVerticalScrollIndicator={false}
                scrollEventThrottle={16}
                onScroll={Animated.event( [{nativeEvent:{contentOffset: {y: this.state.headerScrollY}}}])}
            >
                ...
            </ScrollView>
        );
    }

要设置默认标题，我必须在使用“createStackNavigator”时设置“defaultNavigationOptions”的“标题”值。我可以使用它来创建一个简单的红色 defaultHeader，高度为 100(下面的代码和图像):

const HomeStack = createStackNavigator({
    Home: HomeScreen,
    Category: CategoryScreen,
    Venue: VenueScreen,
    Activity: ActivityScreen,
}, {
    headerMode: 'screen',
    defaultNavigationOptions: {
        header: <View style={{backgroundColor: '#ff0000', height: 100}} />
        ,
    },
});

Simulator demonstrating application of simple default header

不幸的是，对于我的动画标题，我需要“导航” Prop ，因为它用于存储动画值。我尝试了很多方法将它传递到我需要值的地方，并想知道是否有人知道如何做到这一点，或者是否有可能，或者是否有人有任何建议。

Answer 1

感谢 Hend El-Sahli，我现在已经让代码按预期工作了。结果(供其他人将来引用)与以前一样，但是删除了每个屏幕导航选项中的标题定义，“createStackNavigator”调用如下:

const HomeStack = createStackNavigator({
    Home: HomeScreen,
    Category: CategoryScreen,
    Venue: VenueScreen,
    Activity: ActivityScreen,
}, {
    headerMode: 'screen',
    defaultNavigationOptions: ({ navigation }) => ({
        header:
            <SafeAreaView style={{
                height: 0,
                overflow: 'visible',
            }}>
                <Animated.View style={{height: 80, width: 80,
                    transform: [ {translateY: navigation.getParam('headerScrollY', 0)}]
                }}>
                    <TouchableOpacity style={{padding: 20}} onPress={() => navigation.goBack()}>
                        <Icon.Ionicons  style={{color: '#ffffff', width: 50, height: 50}} name={'ios-arrow-round-back'} size={50} />
                    </TouchableOpacity>
                </Animated.View>
            </SafeAreaView>
    }),
});