javascript - react-navigation 如何设置 Animated Value 对应的 tabBar 边距
问题描述
我正在使用 react-navigation Tab Navigation
。我的标签导航上方有一个标题,它可以折叠和展开对应于scrollView
.
这是我的问题:当我一直向上滚动时,标题会折叠,这就是我想要的,但 tabBar 将保持静态(请看照片)。有没有办法可以设置tabBar margin
对应的滚动视图?这样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
:
<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
。您将需要选择使用 Redux或使用 React 上下文connect
的组件。两者都需要一些了解和配置,因此您可能需要阅读一下它们。完成后,定义更改上下文或调度 redux 操作。onScrollChange
推荐阅读
- javascript - 创建 gatsby-browser.js 的 DRY 版本 gatsby-ssr.js
- kotlin - 如何从 kotlin dsl 的根目录应用插件
- node.js - 如何在 Mongoose NodeJS 中使用聚合从数组中检索特定元素
- google-cloud-platform - 无法从 Dataproc sparkjob 访问 GCP Access Secret Manager
- r - 在时间序列可视化上结合 geom_bar、geom_segment 和 facet_grid
- css - 当我更改 CSS 时如何更新我的 HTML?
- api - Power Apps 自定义连接器:无法从
- vue.js - 无法计算产品数量
- android - 如何在 DatePicker 中更改月份选择器中的显示值
- java - 如何通过 HikariCP 使用 SSH 连接来连接 MySQL?