我正在使用 react-navigation Tab Navigation
。我的选项卡导航上方有一个标题,它可以折叠和展开对应于 scrollView
。
这是我的问题:当我一直向上滚动时,标题会折叠,这就是我想要的,但 tabBar 将保持静止(请看照片)。有没有办法可以设置与 ScrollView 对应的 tabBar 边距
?这样当 header 折叠时就没有 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"
}
}
}
)
我还尝试了 marginTop
到 this.AnimatedHeaderValue
但似乎不起作用。任何建议或意见都会非常有帮助。
最佳答案
您可以添加 listener
在 Animated.event 上这将使您获得 y
的值(value):
<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>
在这里,你只需要定义onScrollChange
在你的组件中。因为你的marginTop
在你的顶级 <App />
,更改起来会有点棘手,因此您可能会使用 Redux 或 Context更新和使用这个值。
您也可以将边距置于同一水平并使用状态,但这会迫使您根据您的架构对每个页面执行相同的操作。
因为您需要在运行时更改 tabBarOptions
,您将需要创建并提供自定义 tabBarComponent
到你的导航器:
const AppTabNavigator = createMaterialTopTabNavigator(
{
Home: {
screen: HomeScreen,
navigationOptions: {
header: null,
tabBarVisible: true,
activeTintColor: '#e91e63',
},
},
},
{
tabBarComponent: CustomTabBar
},
)
该组件将扩展 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,
}}
/>
)
这里的问题是您没有变量 hasMargin
.您将需要选择 connect
你的组件using Redux或 use a React context .两者都需要一些理解和配置,因此您可能需要阅读一些内容。完成后,定义 onScrollChange
更改您的上下文或发送 redux 操作。
关于javascript - react-navigation 如何设置动画值对应的tabBar边距,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/53623486/