需要在 React Native 中隐藏和显示顶部选项卡导航的 header。在第一个选项卡上工作，但在另一个选项卡上失败

Question

我想在滚动时隐藏和显示 header 应用程序，但它在第一个选项卡上有效，但在另一个选项卡上失败。

以下是我的header和标签条码[=14=]

<Animated.View style={{height: headerHeight}}>
  <Header centerComponent={{
     text: 'Success Steps',
    }}
  />
</Animated.View>

<Tab.Navigator
 tabBarOptions={{
 style: {backgroundColor: red},
}}>
<Tab.Screen
 name="screen1"/>
<Tab.Screen
 name="screen2"/>
/>

以下是我的插值代码。

scrollY.interpolate({
 inputRange: [0, HEADER_SCROLL_DISTANCE],
 outputRange: [HEADER_MAX_HEIGHT, HEADER_MIN_HEIGHT],
 extrapolate: 'clamp',
}),

我在 child 组件的滚动上调用了 Animated.event 方法，以下是 screen1 代码

render() {
    return (
      <Animated.ScrollView
        scrollEventThrottle={16}
        onScroll={Animated.event(
          [{nativeEvent: {contentOffset: {y: this.scrollY}}}],
          {
            useNativeDriver: true,
          },
        )}>
        <View style={styles.container}>
            <Text>Screen 1</Text>
        </View>
      </Animated.ScrollView>
    );

我已经将 scrollY 从 screen1 和 screen2 传递给 parent 组件（Header 组件），

Answer 1

使用上下文将滚动值传递给屏幕并onScroll改变值

小吃：https://snack.expo.io/@ashwith00/paranoid-ice-cream

代码：

const TabContext = React.createContext();

function HomeScreen() {
  const { y } = React.useContext(TabContext);

  return (
    <View style={{ flex: 1, justifyContent: 'center', alignItems: 'center' }}>
      <Animated.ScrollView
        scrollEventThrottle={16}
        contentContainerStyle={{ paddingTop: 50 }}
        style={{ flex: 1 }}
        onScroll={onScrollEvent({ y })}>
        <View style={[styles.viwe, { backgroundColor: 'green' }]} />
        <View style={[styles.viwe, { backgroundColor: 'blue' }]} />
      </Animated.ScrollView>
    </View>
  );
}

function SettingsScreen() {
  const { y } = React.useContext(TabContext);

  return (
    <View
      style={{
        flex: 1,
        justifyContent: 'center',
        alignItems: 'center',
        backgroundColor: 'yellow',
      }}>
      <Animated.ScrollView
        contentContainerStyle={{ paddingTop: 50 }}
        scrollEventThrottle={16}
        style={{ flex: 1 }}
        onScroll={onScrollEvent({ y })}>
        <View style={[styles.viwe, { backgroundColor: 'green' }]} />
        <View style={[styles.viwe, { backgroundColor: 'blue' }]} />
      </Animated.ScrollView>
    </View>
  );
}

const Tab = createBottomTabNavigator();

export default function App() {
  const y = useValue(0);

  const translateY = interpolate(y, {
    inputRange: [0, 50],
    outputRange: [0, -50],
    extrapolate: Extrapolate.CLAMP,
  });

  return (
    <TabContext.Provider value={{ y }}>
      <NavigationContainer>
        <Tab.Navigator>
          <Tab.Screen name="Home" component={HomeScreen} />
          <Tab.Screen name="Settings" component={SettingsScreen} />
        </Tab.Navigator>
      </NavigationContainer>
      <Animated.View style={[styles.header, { transform: [{ translateY }] }]} />
    </TabContext.Provider>
  );
}

const styles = StyleSheet.create({
  viwe: {
    width: 300,
    height: 500,
  },
  container: {
    flex: 1,
    justifyContent: 'center',
    paddingTop: Constants.statusBarHeight,
    backgroundColor: '#ecf0f1',
    padding: 8,
  },
  paragraph: {
    margin: 24,
    fontSize: 18,
    fontWeight: 'bold',
    textAlign: 'center',
  },
  header: {
    height: 50,
    zIndex: 3,
    backgroundColor: 'red',
    position: 'absolute',
    top: 0,
    left: 0,
    right: 0,
  },
});

Answer 2

在登陆屏幕上使用了 Animated.add()

this.state = {
      tab1ScrollY: new Animated.Value(0),
      tab2ScrollY: new Animated.Value(0),
    };

const scrollY = new Animated.add(
      this.state.tab1ScrollY,
      this.state.tab2ScrollY,
    );

并将其传递给选项卡组件

<TopTabNavigator
     tab1ScrollY={this.state.tab1ScrollY}
     tab2ScrollY={this.state.tab2ScrollY}
/>

下面是我的 tab1 代码

  constructor(props) {
    super(props);
    this.state = {
      scrollY: this.props.tab1ScrollY,
    };
  }

 render() {
    return (
      <Animated.ScrollView
        scrollEventThrottle={16}
        onScroll={Animated.event(
          [{nativeEvent: {contentOffset: {y: this.state.scrollY}}}],
          {
            useNativeDriver: true,
          },
        )}>
        <View><Text>Tab_1<Text></View>
</Animated.ScrollView>

这帮助我解决了问题

需要在 React Native 中隐藏和显示顶部选项卡导航的 header。在第一个选项卡上工作，但在另一个选项卡上失败

Need to hide and show header of top tab navigation in react native. Works on first tab, but fails on another tab

navigation

interpolation

react-native

react-navigation