react-native - 如何将导航道具传递给“createStackNavigator”以使用带有动画的默认标题
问题描述
在过去的几天里,我一直在努力为我的屏幕添加一个动画标题。我已经成功了,但是我现在想默认将此作为我的标题应用,而不是将代码复制并粘贴到我希望使用它的所有屏幕中。目前动画标题在屏幕中实现如下:
渲染标题:
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),
};
}
设置动画插值并将值传递给导航道具(这是我稍后在渲染标题时必须访问的内容)
componentWillMount() {
this.props.navigation.setParams({
headerScrollY: this.state.headerScrollY.interpolate({
inputRange: [0, 80],
outputRange: [0, -80],
})
});
}
带有“scrollView”的主渲染方法调用“onScroll”事件来获取滚动动作
render() {
return (
<ScrollView
style={Styles.wholePageContainer}
showsVerticalScrollIndicator={false}
scrollEventThrottle={16}
onScroll={Animated.event( [{nativeEvent:{contentOffset: {y: this.state.headerScrollY}}}])}
>
...
</ScrollView>
);
}
要设置默认标题,我必须在使用“createStackNavigator”时设置“defaultNavigationOptions”的“标题”值。我可以使用它来创建一个简单的红色默认标题,高度为 100(代码和图片如下):
const HomeStack = createStackNavigator({
Home: HomeScreen,
Category: CategoryScreen,
Venue: VenueScreen,
Activity: ActivityScreen,
}, {
headerMode: 'screen',
defaultNavigationOptions: {
header: <View style={{backgroundColor: '#ff0000', height: 100}} />
,
},
});
不幸的是,对于我的动画标题,我需要“导航”道具,因为它用于存储动画值。我已经尝试了很多方法来将它传递到我需要这些值的地方,并且想知道是否有人知道如何做到这一点,或者是否有可能,或者是否有人有任何建议。
解决方案
感谢 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>
}),
});
推荐阅读
- java - 将静态方法从 java 转换为 kotlin 时出现问题
- android - android wear 以编程方式调出 app laucher
- javascript - 单击块时如何不计算子块(例如.child span)?
- javascript - 如何为引导卡创建这些动画?这对我来说非常复杂,因为我是新手
- python - 多输出 Keras 模型中的消失维度
- react-native - 使用 react-navigation 在 Drawer Navigator 中为路线设置参数
- python - Python 仅当时间是 5 时
- android - 如何检测哪个运营商(Sim1 或 Sim2)在设备中提供移动数据?
- java - Godaddy API 获取所有域自动化
- hyperledger-fabric - 未提供连接类型,未定义“x-type”属性