We read every piece of feedback, and take your input very seriously.
To see all available qualifiers, see our documentation.
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
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)不显示。 麻烦您帮忙看看。。。
The text was updated successfully, but these errors were encountered:
No branches or pull requests
Code
`class CoordinatorLayoutWithTabExample extends Component{
};`
想要CollapsingToolbarLayoutAndroid, AppBarLayoutAndroid, CollapsingToolbarLayoutAndroid和TabLayoutAndroid同时使用,也就是内容的下半部分是tab,通过滚动能够实现tab标题部分的置顶。
我用上面的代码试了下,其他都很好(tab页也可以左右滑动),但是tab的标题(this._tabTexts)不显示。
麻烦您帮忙看看。。。
The text was updated successfully, but these errors were encountered: