React native 如何将导航道具传递给；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>
    }),
});

要呈现标题，请执行以下操作：

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>
            )
        }
    }
};

设置动画插值的步骤 并将值传递给导航道具（这是我以后在呈现标题时必须访问的内容）

带有“scrollView”的主呈现方法调用“onScroll”事件以拾取滚动动作

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

render（）{
返回(
...
);
}

---

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

const HomeStack=createStackNavigator({
主页：主屏幕，
类别：分类屏幕，
地点：维努埃斯维尔，
活动：活动屏幕，
}, {
headerMode:'屏幕'，
默认导航选项：{
标题：
,
},
});

---

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

感谢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>
    }),
});

const HomeStack=createStackNavigator({
主页：主屏幕，
类别：分类屏幕，
地点：维努埃斯维尔，
活动：活动屏幕，
}, {
headerMode:'屏幕'，
defaultNavigationOptions:（{navigation}）=>({
标题：
navigation.goBack（）}>
}),
});

你试过这个：

默认导航选项：（{navigation}）=>（{header:}）

太棒了，它成功了！非常感谢你。我曾尝试过许多类似的变化，但由于文件说，标题必须是一个功能，我一直在做一个功能，我试图获得导航道具，我本来应该是一个阶段的链接，正如你所建议的。我将在下面发布工作代码。快乐编码：）我（愚蠢）的错误是我使用的是

headerLeft:（{navigation}）=>

，它不存在！使用

defaultNavigationOptions:（{navigation}）=>

解决了这个问题！非常感谢。

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

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>
    }),
});