Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

CollapsingToolbarLayoutAndroid, AppBarLayoutAndroid, CollapsingToolbarLayoutAndroid能不能和TabLayoutAndroid同时使用? #16

Open
nangezi123 opened this issue Feb 19, 2019 · 0 comments

Comments

@nangezi123
Copy link

Code

`class CoordinatorLayoutWithTabExample extends Component{

_tabTexts = [
  { text: "tab1" },
  { text: "tab2" },
  { text: "tab3" }
];

componentDidMount() {
  this.refs.coordinatorLayout.setScrollingViewBehavior(this.refs.viewPager);
  this._tabLayout.setViewPager(this._viewPager, this._tabTexts);
}

render() {
  return (
    <View style={[ { flex: 1}]}>
      <CoordinatorLayoutAndroid ref="coordinatorLayout">
        <AppBarLayoutAndroid
          style={{height: 250}}
          layoutParams={{
              width: width,
              scrollFlag: AppBarLayoutAndroid.SCROLL_FLAG_EXIT_UNTIL_COLLAPSED
          }}
        >
          <CollapsingToolbarLayoutAndroid
            expandedTitleMarginStart={20}
            expandedTitleMarginBottom={20}
            collapsedTitleColor="#ffffff"
            contentScrimColor="#2278F6"
            expandedTitleColor="#ffffff"
            layoutParams={{
              scrollFlags: (
                AppBarLayoutAndroid.SCROLL_FLAG_SCROLL |
                AppBarLayoutAndroid.SCROLL_FLAG_SNAP |
                AppBarLayoutAndroid.SCROLL_FLAG_EXIT_UNTIL_COLLAPSED
              )
            }}>
            <View
              style={{
                flex: 1,
                backgroundColor: '#4CAF50'
              }}
              layoutParams={{
                collapseParallaxMultiplie: 0.7,
                collapseMode: CollapsingToolbarLayoutAndroid.CollapseMode.COLLAPSE_MODE_PARALLAX
              }}>
              <Image source={require('./images/beer.jpg')} style={styles.image} />
            </View>
            <ToolbarAndroid
              title="Collapsing Toolbar Layout"
              titleColor="#ffffff"
              layoutParams={{
                height: 56, // required
                collapseMode: CollapsingToolbarLayoutAndroid.CollapseMode.COLLAPSE_MODE_PIN // required
              }}>
            </ToolbarAndroid>
          </CollapsingToolbarLayoutAndroid>
          <View style={{height: 38, backgroundColor: '#4889f1'}}>
            <TabLayoutAndroid
              tabMode="scrollable"
              tabSelectedTextColor="#fff"
              tabIndicatorColor="#fff"
              tabTextColor="rgba(255, 255, 255, .6)"
              tabIndicatorHeight={1}
              tabTextSize={6}
              tabSidePadding={10}
              tabHeight={38}
              ref={(component) => {
                this._tabLayout = component;
              }} />
          </View>
        </AppBarLayoutAndroid>

        <ViewPagerAndroid
          ref="viewPager"
          style={{ backgroundColor: 'transparent' }}
        >
          <FlatList
            data={data}
            renderItem={this.renderBox}
            renderScrollComponent={this.renderScroll}
            /> 
          <FlatList
            data={data}
            renderItem={this.renderBox}
            renderScrollComponent={this.renderScroll}
            />  
          <FlatList
            data={data}
            renderItem={this.renderBox}
            renderScrollComponent={this.renderScroll}
          /> 
        </ViewPagerAndroid>
      </CoordinatorLayoutAndroid>
    </View>
  );
};

renderBox(item) {
  return (
    <View style={styles.box} />
  )
}
renderScroll(props) {
  return (
    <NestedScrollViewAndroid {...props} style={styles.nestedScroll} />
  )
}

};`
想要CollapsingToolbarLayoutAndroid, AppBarLayoutAndroid, CollapsingToolbarLayoutAndroid和TabLayoutAndroid同时使用,也就是内容的下半部分是tab,通过滚动能够实现tab标题部分的置顶。
我用上面的代码试了下,其他都很好(tab页也可以左右滑动),但是tab的标题(this._tabTexts)不显示。
麻烦您帮忙看看。。。

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

1 participant