hcmobile-sdk
Version:
mobile-sdk
327 lines (314 loc) • 11.1 kB
JavaScript
//import liraries
import React, { Component } from 'react';
import { View, Text, StyleSheet,TouchableOpacity } from 'react-native';
import {
ViewPager,
PagerTabIndicator,
IndicatorViewPager,
PagerTitleIndicator,
PagerDotIndicator,
} from './index';
// create a component
class ViewPagerDemo extends Component {
render () {
let contentArr = [
{
backColor:'black',
text:'我是黑色第一个',
onPress:() => {
alert('黑色');
}
},
{
backColor:'blue',
text:'我是蓝色第二个',
onPress:() => {
alert('蓝色');
}
},
{
backColor:'green',
text:'我是绿色第三个',
onPress:() => {
alert('绿色');
}
},
{
backColor:'black',
text:'我是黑色第四个',
onPress:() => {
alert('黑色');
}
},
{
backColor:'blue',
text:'我是蓝色第五个',
onPress:() => {
alert('蓝色');
}
},
{
backColor:'green',
text:'我是绿色第六个',
onPress:() => {
alert('绿色');
}
},
{
backColor:'black',
text:'我是黑色第七个',
onPress:() => {
alert('黑色');
}
},
{
backColor:'blue',
text:'我是蓝色第八个',
onPress:() => {
alert('蓝色');
}
},
{
backColor:'green',
text:'我是绿色第九个',
onPress:() => {
alert('绿色');
}
},
];
let tabArr = [
{
backColor:'black',
text:'我是正方形',
onPress:() => {
alert('黑色');
}
},
{
backColor:'blue',
text:'我是圆形',
onPress:() => {
alert('蓝色');
}
},
{
backColor:'green',
text:'我是三角形',
onPress:() => {
alert('绿色');
}
},
];
return (
<View style={{ width:'100%', height: '100%' }}>
<ViewPager
style={{height:100}}
initialPage={1}
>
{contentArr.map(({ backColor,text, onPress }, index) => (
<View key={'key' + index}>
<TouchableOpacity activeOpacity = {1} onPress={onPress}>
<View
style={{
width:'100%',
height:100,
alignItems:'center',
justifyContent:'center',
backgroundColor: backColor
}}>
<Text style = {{color:'white'}}>ViewPager</Text>
<Text style = {{color:'white'}}>{text}</Text>
</View>
</TouchableOpacity>
</View>
))}
</ViewPager>
<IndicatorViewPager
style={{height:100,marginTop:10}}
initialPage={1}
autoPlayEnable = {true}
indicator={this._renderDotIndicator()}
>
{contentArr.map(({ backColor,text, onPress }, index) => (
<View key={'key' + index}>
<TouchableOpacity activeOpacity = {1} onPress={onPress}>
<View
style={{
width:'100%',
height:100,
alignItems:'center',
justifyContent:'center',
backgroundColor: backColor
}}>
<Text style = {{color:'white'}}>IndicatorViewPager</Text>
<Text style = {{color:'white'}}>{text}</Text>
</View>
</TouchableOpacity>
</View>
))}
</IndicatorViewPager>
<IndicatorViewPager
style={{height:150,marginTop:10}}
initialPage={1}
indicator={this._renderTitleIndicator()}
>
{contentArr.map(({ backColor,text, onPress }, index) => (
<View key={'key' + index}>
<TouchableOpacity activeOpacity = {1} onPress={onPress}>
<View
style={{
width:'100%',
height:100,
alignItems:'center',
justifyContent:'center',
backgroundColor: backColor
}}>
<Text style = {{color:'white'}}>PagerTitleIndicator</Text>
<Text style = {{color:'white'}}>{text}</Text>
</View>
</TouchableOpacity>
</View>
))}
</IndicatorViewPager>
<IndicatorViewPager
style={{height:150,marginTop:10}}
initialPage={0}
indicator={this._renderTabIndicator()}
>
{tabArr.map(({ backColor,text, onPress }, index) => (
<View key={'key' + index}>
<TouchableOpacity activeOpacity = {1} onPress={onPress}>
<View
style={{
width:'100%',
height:100,
alignItems:'center',
justifyContent:'center',
backgroundColor: backColor
}}>
<Text style = {{color:'white'}}>PagerTabIndicator</Text>
<Text style = {{color:'white'}}>{text}</Text>
</View>
</TouchableOpacity>
</View>
))}
</IndicatorViewPager>
</View>
);
}
_renderDotIndicator() {
return <PagerDotIndicator pageCount={9} />;
}
_renderTitleIndicator () {
return (
<PagerTitleIndicator
style={styles.indicatorContainer}
trackScroll={true}
itemTextStyle={styles.indicatorText}
itemStyle={{width:50}}
selectedItemStyle={{width:50}}
selectedItemTextStyle={styles.indicatorSelectedText}
selectedBorderStyle={styles.selectedBorderStyle}
titles={['黑色', '蓝色','绿色','黑色', '蓝色','绿色','黑色', '蓝色','绿色',]}
// renderTitle = {() => {
// return(
// <View>
// <Text>自定义</Text>
// </View>);
// }}
/>
);
}
_renderTabIndicator () {
let tabs = [
{
text: 'SQUARE',
iconSource: require('../../images/ic_tab_square.png'),
selectedIconSource: require('../../images/ic_tab_square_slct.png')
},
{
text: 'CIRCLE',
iconSource: require('../../images/ic_tab_circle.png'),
selectedIconSource: require('../../images/ic_tab_circle_slct.png')
},
{
text: 'TRIANGLE',
iconSource: require('../../images/ic_tab_triangle.png'),
selectedIconSource: require('../../images/ic_tab_triangle_slct.png')
}
]
return (
<PagerTabIndicator
style={[styles.indicatorContainer,{backgroundColor:'white'}]}
iconStyle={styles.tabIcon}
selectedIconStyle={styles.selectedTabIcon}
textStyle={styles.tabTxt}
selectedTextStyle={styles.selectedTabTxt}
itemStyle={styles.tabItem}
selectedItemStyle={styles.selectedTabItem}
tabs={tabs}
changePageWithAnimation = {true}
/>
)
}
}
// define your styles
const styles = StyleSheet.create({
container: {
flex: 1,
justifyContent: 'center',
alignItems: 'center',
backgroundColor: 'white',
},
indicatorContainer: {
width:'100%',
backgroundColor: '#999',
height: 48
},
indicatorText: {
fontSize: 14,
color: 0xFFFFFF99
},
indicatorSelectedText: {
fontSize: 14,
color: 0xFFFFFFFF
},
selectedBorderStyle: {
height: 3,
backgroundColor: 'white'
},
tabIcon: {
width: 20,
height: 20,
tintColor: '#7F8C8D',
resizeMode: 'contain'
},
selectedTabIcon: {
width: 20,
height: 20,
tintColor: '#2C3E50',
resizeMode: 'contain'
},
tabTxt: {
color: '#34495E',
marginTop: 0,
fontSize: 10.5
},
selectedTabTxt: {
color: '#2C3E50',
marginTop: 0,
fontSize: 12
},
tabItem: {
justifyContent: 'space-between',
paddingBottom: 10,
paddingTop: 8
},
selectedTabItem: {
justifyContent: 'space-between',
paddingBottom: 10,
paddingTop: 6
}
});
//make this component available to the app
export default ViewPagerDemo;