Open
Description
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)不显示。
麻烦您帮忙看看。。。
Metadata
Metadata
Assignees
Labels
No labels