1

我正在构建一个反应原生应用程序，如社交平台。在该应用程序中，我使用了 react-navigation 包中的选项卡导航。在一个屏幕上的选项卡内，我使用了 react-native-tab-view 中的另一个选项卡视图。在那个标签视图中，我希望当我滚动内部内容然后滚动标签栏时，该栏应该隐藏/显示，或者它可以随着标签视图的内容滚动。目前，内容滚动正常，但是当我为选项卡视图提供带有 Scrollview 的父级时，它只滚动到某些部分，而不显示我的全部内容。

在该屏幕中，有两个选项卡，一个是世界提要，另一个是连接提要。

export class FeedTab extends PureComponent {

  constructor(props) {
    super(props);
    this.da = data.getTopics();
    this.state = {
      index: 0,
      routes: [
        { key: '1', title: 'World' },
        { key: '2', title: 'Connections'},
      ],
    };
    this.data = data.getArticles('post');
  }



  _keyExtractor(post, index) {
    return post.id;
  }

  renderOpenFeedView(info, navi){
    return(
      content....
    )
  }

  renderConnectionFeedView(info, navi){
    return(
      content....
    )
  }

  renderOpenFeed(){
    return(
        <FlatList data={this.data}
          extraData={this.props}
          renderItem={item =>     this.renderOpenFeedView(item, this.props.navigation)}
          keyExtractor={this._keyExtractor}
          style={feedStyles.container}/>
    )
  }

  renderConnectionFeed(){
    return(
      <FlatList data={this.data}
        extraData={this.props}
        renderItem={item => this.renderConnectionFeedView(item, this.props.navigation)}
        keyExtractor={this._keyExtractor}
        style={feedStyles.container}/>
    )
  }

  _handleIndexChange = index => this.setState({ index });

  _renderHeader = props => <TabBar
                              {...props}
                              style = {{backgroundColor:RkTheme.current.colors.inverse,elevation: 3, borderBottomWidth: 0.4,borderColor: RkTheme.current.colors.grey}}
                              labelStyle = {{color:RkTheme.current.colors.text.tabLabel, fontFamily: RkTheme.current.fonts.bold, fontSize:12}}
                              tabStyle = {{width:responsiveWidth(50)}}
                              scrollEnabled = {true}
                              indicatorStyle = {{backgroundColor: RkTheme.current.colors.primary}} />;


  _renderScene = SceneMap({
    '1': this.renderOpenFeed.bind(this),
    '2': this.renderConnectionFeed.bind(this),
  });

  render() {
      return (
          <TabViewAnimated
            style={styles.container}
            navigationState={this.state}
            renderScene={this._renderScene}
            renderHeader={this._renderHeader}
            onIndexChange={this._handleIndexChange}
          />
    );
  }
}

const styles = StyleSheet.create({
  container: {
    width:responsiveWidth(100),
    height:responsiveHeight(99),
    backgroundColor: RkTheme.current.colors.screen.scroll,
  },
});

这是我在提要视图中呈现的提要选项卡组件，如下所示。

<FeedTab navigation = {this.props.navigation} />

现在滚动很好，我希望当我滚动内容时，标签栏也应该随之滚动，或者可以通过向下/向上滚动来隐藏/显示。

如果有人知道请帮忙。

提前致谢。

4

0 回答 0