如何在React Native中制作带标签的视差滚动视图？

npm install react-native-parallax-scroll-view react-native-tab-view

import React from 'react';
import { View, Text, StyleSheet } from 'react-native';
import { TabView, SceneMap } from 'react-native-tab-view';
import ParallaxScrollView from 'react-native-parallax-scroll-view';

const tabs = [
  { key: 'tab1', title: '标签1' },
  { key: 'tab2', title: '标签2' },
  { key: 'tab3', title: '标签3' },
];

const renderScene = SceneMap({
  tab1: () => (
    <View style={styles.scene}>
      <Text>标签1的内容</Text>
    </View>
  ),
  tab2: () => (
    <View style={styles.scene}>
      <Text>标签2的内容</Text>
    </View>
  ),
  tab3: () => (
    <View style={styles.scene}>
      <Text>标签3的内容</Text>
    </View>
  ),
});

const ParallaxScroll = () => (
  <ParallaxScrollView
    backgroundColor="white"
    contentBackgroundColor="white"
    parallaxHeaderHeight={200}
    renderForeground={() => (
      <View style={styles.parallaxHeader}>
        <Text style={styles.parallaxHeaderText}>带标签的视差滚动视图</Text>
      </View>
    )}
  >
    <TabView
      navigationState={{ index: 0, routes: tabs }}
      renderScene={renderScene}
      onIndexChange={() => {}}
      initialLayout={{ width: Dimensions.get('window').width }}
    />
  </ParallaxScrollView>
);

const styles = StyleSheet.create({
  parallaxHeader: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
    backgroundColor: '#2196F3',
  },
  parallaxHeaderText: {
    fontSize: 24,
    color: 'white',
  },
  scene: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
  },
});

export default ParallaxScroll;

import React from 'react';
import { View } from 'react-native';
import ParallaxScroll from './ParallaxScroll';

const App = () => (
  <View style={{ flex: 1 }}>
    <ParallaxScroll />
  </View>
);

export default App;