过去几天我一直在努力为我的屏幕添加一个动画标题。我已经成功了,但是现在我想将它作为我的标题应用,而不是将代码复制并粘贴到我希望使用它的所有屏幕中。目前,动画标题在屏幕中实现如下:
要呈现标题:
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”的“标头”值。我可以使用它来创建一个红色的简单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
不幸的是,对于我的动画标题,我需要“导航”道具,因为它用于存储动画值。我已经尝试了很多方法将它传递到我需要值的地方,并且想知道是否有人知道如何做到这一点,或者是否有可能或任何人有任何建议。
感谢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>
}),
});