11-3 频道信息组件

在这一章中，我们将完成频道信息组件的布局。以下是如何实现频道信息组件的详细步骤：

1. 设置频道页面的导航选项

function getAlbumOptions({
  route,
}: {
  route: RouteProp<RootStackParamList, 'Album'>;
}) {
  return {
    headerTransparent: true,
    headerTitleStyle: {
      opacity: 0,
    },
    headerBackground: () => (
      <Animated.View style={styles.headerBackground} />
    ),
  };
}

<RootStack.Screen
  name="Album"
  component={Album}
  options={getAlbumOptions}
/>

2. 动态获取标题栏高度

使用 useHeaderHeight 钩子获取标题栏高度，并将其传递给 Album 组件：

const Wrapper = function(props: IProps) {
  const headerHeight = useHeaderHeight();
  return <Album {...props} headerHeight={headerHeight} />;
};

3. 渲染频道信息组件

在 Album 组件中，根据 headerHeight 设置布局：

class Album extends React.Component<IProps, IState> {
  render() {
    const { headerHeight, route } = this.props;
    const { item } = route.params;

    return (
      <View style={[styles.header, { paddingTop: headerHeight }]}>
        {/* 渲染频道信息组件 */}
      </View>
    );
  }
}

4. 添加背景图片和模糊效果

使用 @react-native-community/blur 库实现背景图片的模糊效果：

import { BlruView } from '@react-native-community/blur';

<Iruge
  source={{ uri: item.image }}
  ref={this.backgroundImage}
  onLoadEnd={this.imageLoaded}
  style={[StyleSheet.absoluteFillObject, styles.image]}
/>
{this.state.backgroundRef && (
  <BlurView
    style={StyleSheet.absoluteFillObject}
    viewRef={this.state.backgroundRef}
    blurType="light"
    blurAmount={10}
  />
)}

5. 动态调整标题栏透明度

使用 Animated API 动态调整标题栏的透明度：

const headerBackgroundOpacity = new Animated.Value(0);

Animated.timing(headerBackgroundOpacity, {
  toValue: 1,
  duration: 500,
  useNativeDriver: false,
}).start();

const styles = StyleSheet.create({
  headerBackground: {
    flex: 1,
    backgroundColor: '#fff',
    opacity: headerBackgroundOpacity,
  },
});

6. 渲染频道详细信息

在 Album 组件中，渲染频道的标题、摘要、作者信息等：

<View style={styles.headerRight}>
  <Text style={styles.title}>{item.title}</Text>
  <View style={styles.summary}>
    <Text style={styles.summaryText} numberOfLines={1}>
      {summary}
    </Text>
  </View>
  <View style={styles.author}>
    <Image
      source={{ uri: author.avatar }}
      style={styles.avatar}
    />
    <Text style={styles.name}>{author.name}</Text>
  </View>
</View>

7. 总结

通过以上步骤，我们成功实现了频道信息组件的布局和动态效果。下一节，我们将继续完善频道页面的功能。