Question

我正在构建一个像本地社交平台这样的本地应用程序。在该应用程序中，我使用了react-navigation软件包中的选项卡导航。在一个屏幕上的标签内，我使用了react-native-tab-view中的另一个标签视图。在该选项卡视图中，我希望当我滚动内部内容然后在选项卡栏上显示或隐藏该栏，或者它可以随选项卡视图的内容一起滚动。现在，内容可以很好地滚动，但是当我向TabView提供带有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} />

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

如果有人知道，请帮助。

谢谢。

用内部滚动反应本机的tabview滚动标签栏

0 个答案: