react-native - React Native Tab View - 滚动时在顶部显示标签栏

Question

我正在使用 React Native 选项卡视图，并使用它renderTabBar来显示我的自定义选项卡栏。所以我的问题是，即使将标签栏向下滚动到底部，如何将其保持在屏幕顶部？就像在 Twitter、Instagram 等任何应用程序中一样。

感谢您的时间和帮助！

这是我的代码：

state = {
 index: 0,
 routes: [
  {
    key: 'first',
    title: 'Images',
    icon: 'ios-stats'
  },
  {
    key: 'second',
    title: 'Members',
    icon: 'ios-remove'
  },
  {
    key: 'third',
    title: 'Views',
    icon: 'ios-map'
  }
]
};

_renderScene = SceneMap({
first: FirstTab,
second: SecondTab,
third: ThirdTab
});

_renderIcon = ({ route }) => {
return (
  <Icon name={route.icon} size={24} color='black' />
);
};

render() {
return (
  <TabView
    navigationState={this.state}
    renderScene={this._renderScene}
    onIndexChange={index => this.setState({ index })}
    initialLayout={{ width: Dimensions.get('window').width }}
    renderTabBar={props => 
      <TabBar
        {...props}
        indicatorStyle={{backgroundColor: 'red'}}
        renderIcon={
          // props => getTabBarIcon(props)
          this._renderIcon
        }
        tabStyle={styles.bubble}
        labelStyle={styles.noLabel}
      />
    }
    render
    lazy={true}
    scrollEnabled={true}
    bounces={true}
  />
);

Answer 1

在您的 tabView 中，尝试为其添加样式

style={{ position: 'static', top: 0 }}

这应该将 tabView 从代码流中取出，并将其固定在屏幕顶部。

如果静态不是一个选项，您可以选择使用相对和绝对定位。

<View style={{ position: 'relative', flex: 1 }}>
  <TabBar style={{ position: 'absolute', top: 0 }} />
  <ScrollView>
    <Content /> 
  </ScrollView>
</View>

https://snack.expo.io/@isaackhoo/fixed-header-with-scroll-view 这是一个小吃示例。