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 这是一个零食的例子。