|
dotStyle={{ backgroundColor: 'rgba(0,0,0,.2)', width: 6, height: 6 }} activeDotStyle={{ backgroundColor: 'rgba(0,0,0,.5)', width: 6, height: 6 }}> {renderSwipeView(['美食', '甜品饮品', '商店超市', '预定早餐', '果蔬生鲜', '新店特惠', '准时达', '高铁订餐'], 0)} {renderSwipeView(['土豪推荐', '鲜花蛋糕', '汉堡炸鸡', '日韩料理', '麻辣烫', '披萨意面', '川湘菜', '包子粥店'], 8)} </Swiper> ) } render() { return ( <View style={styles.container}>
<ScrollView style={styles.scrollView}> {this._renderHeader()} <View style={{ backgroundColor: "#fff", paddingBottom: px2pd(10) }}> {this._renderTypes()} </View>
</ScrollView>
</View> ); } } // define your styles
const styles = StyleSheet.create({ container: { flex: 1, backgroundColor: '#f3f3f3', }, scrollView: { marginBottom: px2pd(46), }, header: { backgroundColor: '#0398ff', height: headH, paddingTop: px2pd(isIOS ? 30 : 10), paddingHorizontal: 16, }, lbsWeather: { height: inputHeight, overflow: "hidden", flexDirection: 'row', justifyContent: 'space-between', }, lbs: { flexDirection: 'row', justifyContent: 'center', alignItems: 'center', }, weather: { flexDirection: 'row', alignItems: 'center', }, searchBtn: { borderRadius: inputHeight, height: inputHeight, flexDirection: 'row', backgroundColor: '#fff', justifyContent: 'center', alignItems: 'center', }, keywords: { marginTop: px2pd(14), flexDirection: 'row', justifyContent: 'space-between', }, typesView: { paddingBottom: px2pd(10), flex: 1, backgroundColor: "#fff", flexDirection: "row", flexWrap: "wrap" }, typesItem: { backgroundColor: '#fff', justifyContent: 'center', alignItems: 'center' }, }); //make this component available to the app
export default TargetView;
//---------------------px2dp.js------------------------------// import { Dimensions } from 'react-native'
const deviceH = Dimensions.get('window').height const deviceW = Dimensions.get('window').width const basePx = 375 export default function px2dp(px) { return px * deviceW / basePx }
附一张属性表：
3.1 基本属性
Prop
|
Default |
Type |
Description |
| horizontal |
true |
bool |
如果值为true时，那么滚动的内容将是横向排列的，而不是垂直于列中的。 |
| loop |
true |
bool |
如果设置为false，那么滑动到最后一张时，再次滑动将不会展示第一张图片。 |
| index |
0 |
number |
初始进入的页面标识为0的页面。 |
| showsButtons |
false |
bool |
如果设置为true，那么就可以使控制按钮（即：左右两侧的箭头）可见。 |
| autoplay |
false |
bool |
设置为true，则页面可以自动跳转。 |
3.2 自定义属性
| Prop |
Default |
Type |
Description |
| width |
- |
number |
如果你没有特殊的设置，就通过flex:1默认为全屏。 |
| height |
- |
number |
如果你没有特殊的设置，就通过flex:1默认为全屏。 |
| style |
{...} |
style |
设置页面的样式。 |
3.3 pagination 分页
| Prop |
Default |
Type |
Description |
| showsPagination |
true |
bool |
默认值为true，在页面下边显示圆点，以标明当前页面位于第几个。 |
| paginationStyle |
{...} |
style |
设置页面原点的样式，自定义的样式会和默认样式进行合并。 |
| renderPagination |
|
|
|
| dot |
<View style={{backgroundColor:'rgba(0,0,0,.2)', width: 8, height: 8,borderRadius: 4, marginLeft: 3, marginRight: 3, marginTop: 3, marginBottom: 3,}} /> |
element |
可以自定义不是当前圆点的样式 |
| activeDot |
<View style={{backgroundColor: '#007aff', width: 8, height: 8, borderRadius: 4, marginLeft: 3, marginRight: 3, marginTop: 3, marginBottom: 3,}} /> |
element |
可以自定义当前页面圆点的样式 |
3.4 自动播放
| Prop |
Default |
Type |
Description |
| autoplay |
true |
bool |
设置为true可以使页面自动滑动。 |
| autoplayTimeout |
2.5 |
number |
设置每个页面自动滑动停留的时间 |
| autoplayDirection |
true |
|