[英]react-navigation How to set tabBar margin corresponding to Animated Value
I am using react-navigation Tab Navigation
. 我正在使用react-navigation
Tab Navigation
。 I have a header above my tab navigation and it can collapse and expand corresponding to the scrollView
. 我的标签导航上方有一个标题,它可以折叠和展开对应的
scrollView
。
This is my problem: When I scroll all the way up, the header will collapse and thats what I want but the tabBar will stay static(Please see the photo). 这是我的问题:当我一直向上滚动时,标题会崩溃,这就是我想要的,但tabBar将保持静态(请参阅照片)。 Is there a way I could set the
tabBar margin
corresponding to the scrollview? 有没有办法设置与
tabBar margin
对应的tabBar margin
? So that there is no marginTop
when the header is collapsed. 这样当标题折叠时没有
marginTop
。
const Header_Maximum_Height = 40;
const Header_Minimum_Height = 0;
export default class App extends Component {
render(){
return (
<View style={{flex:1, marginTop:30}}>
<AppContainer/>
</View>
)
}
}
class HomeScreen extends Component{
constructor()
{
super();
this.AnimatedHeaderValue = new Animated.Value(0);
}
render() {
const AnimateHeaderBackgroundColor = this.AnimatedHeaderValue.interpolate(
{
inputRange: [ 0, ( Header_Maximum_Height - Header_Minimum_Height ) ],
outputRange: [ '#009688', '#00BCD4' ],
extrapolate: 'clamp'
});
const AnimateHeaderHeight = this.AnimatedHeaderValue.interpolate(
{
inputRange: [ 0, ( Header_Maximum_Height - Header_Minimum_Height ) ],
outputRange: [ Header_Maximum_Height, Header_Minimum_Height ],
extrapolate: 'clamp'
});
return (
<SafeAreaView style={{flex:1}}>
<Animated.View style={{height:AnimateHeaderHeight,width:'100%', backgroundColor:'gray'}}>
<Text style={{color:'white'}}> Collapsible Expandable Header </Text>
</Animated.View>
<Animated.ScrollView
scrollEventThrottle = { 16 }
onScroll = { Animated.event(
[{ nativeEvent: { contentOffset: { y: this.AnimatedHeaderValue }}}]
)}>
<ImageBackground
style={{width:375, height:400}}
source={require('./assets/pizza.jpg')}>
</ImageBackground>
</Animated.ScrollView>
</SafeAreaView>
);
}
}
const tabBarHeight = 100
const AppTabNavigator = createMaterialTopTabNavigator({
Home:{
screen:HomeScreen,
navigationOptions: {
header: null,
tabBarVisible:true,
activeTintColor: '#e91e63',
}
}, {
tabBarOptions: {
showLabel: true,
style: {
backgroundColor: 'rgba(22, 22, 22, 0)',
position: 'absolute',
Top: Dimensions.get('window').height-tabBarHeight,
left:0,
right:0,
//I initially set the margin to 45 but as I scroll up How can I set the marginTop to 0 when I reach the top screen.
marginTop:45
},
labelStyle:{
fontSize:15,
color:"white"
}
}
}
)
I also tried marginTop
to this.AnimatedHeaderValue
but doesn't seem to work. 我也试过
marginTop
到this.AnimatedHeaderValue
但似乎没有用。 Any advise or comments would be really helpful. 任何建议或意见都会非常有帮助。
You can add a listener
on the Animated.event that would allow you to get the value of your y
: 您可以在Animated.event上添加一个
listener
,它允许您获取y
的值:
<Animated.ScrollView
scrollEventThrottle={16}
onScroll={Animated.event(
[{ nativeEvent: { contentOffset: { y: this.AnimatedHeaderValue }}}],
{
useNativeDriver: true,
listener: event => {
const offsetY = event.nativeEvent.contentOffset.y
this.onScrollChange(offsetY)
}
},
)}
>
<ImageBackground
style={{ width: 375, height: 400 }}
source={require('./assets/pizza.jpg')}
/>
</Animated.ScrollView>
Here, you just need to define the onScrollChange
in your component. 在这里,您只需要在组件中定义
onScrollChange
。 Because your marginTop
is in your top-level <App />
, it will be a little tricky to change, so you could potentially use Redux or a Context to update and use this value. 因为您的
marginTop
位于顶级<App />
,所以更改起来会有点棘手,因此您可能会使用Redux或Context来更新和使用此值。
You could also put the margin at the same level and use a state, but that would force you to do the same for every page depending on your architecture. 您还可以将边距放在同一级别并使用状态,但这会强制您对每个页面执行相同操作,具体取决于您的体系结构。
Because you need to change on runtime the tabBarOptions
, you're going to need to create and provide a custom tabBarComponent
to your navigator: 因为你需要改变运行时
tabBarOptions
,你将需要创建并提供自定义tabBarComponent
到您的导航仪:
const AppTabNavigator = createMaterialTopTabNavigator(
{
Home: {
screen: HomeScreen,
navigationOptions: {
header: null,
tabBarVisible: true,
activeTintColor: '#e91e63',
},
},
},
{
tabBarComponent: CustomTabBar
},
)
This component will extend the default component used by react-navigation, and hook into a state. 该组件将扩展react-navigation使用的默认组件,并挂钩到一个状态。
import React from 'react'
import { MaterialTopTabBar } from 'react-navigation'
export default ({ hasMargin, ...props }) => (
<MaterialTopTabBar
{...props}
showLabel
labelStyle={{
fontSize: 15,
color: 'white',
}}
style={{
backgroundColor: 'rgba(22, 22, 22, 0)',
position: 'absolute',
top: Dimensions.get('window').height-tabBarHeight,
left: 0,
right: 0,
marginTop: hashMargin ? 45 : 0,
}}
/>
)
The problem here is that you won't have the variable hasMargin
. 这里的问题是你不会有变量
hasMargin
。 You will need to either choose to either connect
your component using Redux or use a React context . 您需要选择使用Redux
connect
组件或使用React上下文 。 Both require some understanding and configuration, so you might need to read up a bit on them. 两者都需要一些理解和配置,因此您可能需要阅读它们。 Once it's done, define
onScrollChange
to change your context or dispatch a redux action. 完成后,定义
onScrollChange
以更改上下文或调度redux操作。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.