Question

我正在关注链接中的教程：https://medium.com/appandflow/react-native-scrollview-animated-header-10a18cb9469e。但是，我似乎无法理解如何向此添加标签，以便在向上滚动时标签标题固定在顶部。任何人都可以建议如何实现这一目标？

Answer 1

我能够在本机库中使用ScrollableTab和Tab来实现它。

代码看起来像这样

<Tabs
            prerenderingSiblingsNumber={3}
            onChangeTab={({i}) => {
              this.setState({height: this.heights[i], activeTab: i})
            }}
            renderTabBar={(props) => <Animated.View
              style={{transform: [{translateY: tabY}], zIndex: 1, width: "100%", backgroundColor: "white", paddingTop : HEADER_MAX_HEIGHT }}>
              <ScrollableTab {...props}
                             renderTab={(name, page, active, onPress, onLayout) => (
                               <TouchableOpacity key={page}
                                                 onPress={() => onPress(page)}
                                                 onLayout={onLayout}
                                                 activeOpacity={0.4}>
                                 <Animated.View
                                   style={{
                                     flex: 1,
                                     height: 100,
                                     backgroundColor: tabBg
                                   }}>
                                   <TabHeading scrollable
                                               style={{
                                                 backgroundColor: "transparent",
                                                 width: Dimensions.get('window').width / 2
                                               }}
                                               active={active}>
                                     <Animated.Text style={{
                                       fontWeight: active ? "bold" : "normal",
                                       color: 'black',
                                       padding: 10,
                                       fontSize: active ? 20:18
                                     }}>
                                       {name}
                                     </Animated.Text>
                                   </TabHeading>
                                 </Animated.View>
                               </TouchableOpacity>
                             )}
                             underlineStyle={{backgroundColor: 'black'}}/>
            </Animated.View>
            }>
            <Tab heading="Tab 1">
              {this.tabContent(30, 0)}
            </Tab>
            <Tab heading="Tab 2">
              {this.tabContent(15, 1)}
            </Tab>
          </Tabs>

Answer 2

使用此：

expo install react-native-gesture-handler react-native-reanimated

然后在<Animated.View ......<Text>....</Text>..... ></Animated.View>中替换以下基本用法：

<TabView
  navigationState={{ index, routes }}
  onIndexChange={setIndex}
  renderScene={SceneMap({
    first: FirstRoute,
    second: SecondRoute,
  })}
/>

希望它能对您有所帮助！！

Answer 3

万一其他人落在这个线程上，我开发了一个新程序包， react-native-animated-screen ，它完全满足您的需求

签出

https://www.npmjs.com/package/react-native-animated-screen

import  React  from  'react';
import { Image, Text, View } from  'react-native';
import AnimatedScreen from  'react-native-animated-screen';

const  Component = () => {
   return (
     <AnimatedScreen.Wrapper>
       <AnimatedScreen.Header>
         <View>
           <Text>Title</Text>
           <AnimatedScreen.CollapsibleElement>
             <Text>Subtitle</Text>
           </AnimatedScreen.CollapsibleElement>
           <AnimatedScreen.Element>
            <YourTabsComponen /> 
           </AnimatedScreen.Element>
         </View>
       </AnimatedScreen.Header>
       <AnimatedScreen.ScrollView>
         <View  style={{ height: '300%' }}>
           <View>
             <Text>Body</Text>
           </View>
         </View>
       </AnimatedScreen.ScrollView>
     </AnimatedScreen.Wrapper>
   );
};

在上面的示例中，滚动后仅会保留标题和YourTabBComponent，字幕（因为包装在CollapsibleElement中的所有元素）都将消失。

理想情况下，您还可以让选项卡仅在使用插值道具或AnimatedScreen.Element的animatedStyle完全滚动时显示。

// using interpolate the animation will flow from 0 to scrollY === headerMaxHeight 
<AnimatedScreen.Element interpolate={{ opacity: [0, 1], height: [0, 60] }}>
  <TabComponent />
</AnimatedScreen.Element>

// alternatevely you can have more control with an animatedStyle

<AnimatedScreen.Element animatedStyle={scrollY => ({
  opacity: scrollY.interpolate({
    inputRange: [100, 200],
    outputRange: [0, 1]
    extrapolate: 'clamp'
  })
})}>
  <TabComponent />
</AnimatedScreen.Element>

Answer 4

万一其他人落在这个线程上，我开发了一个新程序包， react-native-animated-screen ，它完全满足您的需求

签出

https://www.npmjs.com/package/react-native-animated-screen

import  React  from  'react';
import { Image, Text, View } from  'react-native';
import AnimatedScreen from  'react-native-animated-screen';

const  Component = () => {
   return (
     <AnimatedScreen.Wrapper>
       <AnimatedScreen.Header>
         <View>
           <Text>Title</Text>
           <AnimatedScreen.CollapsibleElement>
             <Text>Subtitle</Text>
           </AnimatedScreen.CollapsibleElement>
           <AnimatedScreen.Element>
            <YourTabsComponen /> 
           </AnimatedScreen.Element>
         </View>
       </AnimatedScreen.Header>
       <AnimatedScreen.ScrollView>
         <View  style={{ height: '300%' }}>
           <View>
             <Text>Body</Text>
           </View>
         </View>
       </AnimatedScreen.ScrollView>
     </AnimatedScreen.Wrapper>
   );
};

在上面的示例中，滚动后仅会保留标题和YourTabBComponent，字幕（因为包装在CollapsibleElement中的所有元素）都将消失。

理想情况下，您还可以让选项卡仅在使用插值道具或AnimatedScreen.Element的animatedStyle完全滚动时显示。

// using interpolate the animation will flow from 0 to scrollY === headerMaxHeight 
<AnimatedScreen.Element interpolate={{ opacity: [0, 1], height: [0, 60] }}>
  <TabComponent />
</AnimatedScreen.Element>

// alternatevely you can have more control with an animatedStyle

<AnimatedScreen.Element animatedStyle={scrollY => ({
  opacity: scrollY.interpolate({
    inputRange: [100, 200],
    outputRange: [0, 1]
    extrapolate: 'clamp'
  })
})}>
  <TabComponent />
</AnimatedScreen.Element>

带有滚动动画标题的标签 - React native

4 个答案: