这里构建一个可以滚动的分类选项卡,主要使用ScrollView组件。
我们还来到HomeScreen.js文件
因为我们要使用ScrollView,所以导入它
1 2 3 4 5 6 |
import { ...... //分类 ScrollView, //end 分类 ....... |
后面我们要它,渲染到视图中:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 |
render() { const { navigate } = this.props.navigation; return ( ........... <View style={styles.scrollviewclass}> <ScrollView showsHorizontalScrollIndicator={false} horizontal={true} > <View style={styles.active}> <Text style={styles.typebox} onPress={() => this._loadProduct('全部')}>全部</Text> </View> <View> <Text style={styles.typebox} onPress={() => this._loadProduct('分类1')} >分类1</Text> </View> <View > <Text style={styles.typebox} onPress={() => this._loadProduct('分类2')}>分类2</Text> </View> <View > <Text style={styles.typebox} onPress={() => this._loadProduct('分类3')}>分类3</Text> </View> <View > <Text style={styles.typebox} onPress={() => this._loadProduct('分类4')}>分类4</Text> </View> <View > <Text style={styles.typebox} onPress={() => this._loadProduct('分类5')}>分类5</Text> </View> <View > <Text style={styles.typebox} onPress={() => this._loadProduct('分类6')}>分类6</Text> </View> </ScrollView> </View> |
这里面包含了每个分类,
看看ScrollView上的这些属性:
showsHorizontalScrollIndicator={false} 不现实滚动条
horizontal={true} 内容一行排列
添加样式:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 |
container: { flex: 1, alignItems: 'flex-start', flexDirection: 'column', backgroundColor: '#F6F6F6', }, //分类部分 scrollviewclass: { height: 50, width: deviceWidth, backgroundColor: 'white' }, active: { borderBottomWidth: 1, borderBottomColor: 'red', }, typebox: { width: 70, fontSize: 18, lineHeight: 35, textAlign: 'center', }, |
下面你要留意再ScrollView组件中有一行
1 |
<Text style={styles.typebox} onPress={() => this._loadProduct('全部')}>全部</Text> |
而且每个分类都有,这些代码,那他们中有一个this._loadProduct,他的目的是点击后,获取相应的分类数据(在这里我们就不去获取产品了,只是更改名称)。
1 2 3 4 5 6 7 8 |
_loadProduct(catid) { var that = this; console.log(catid); this.setState({ catid: catid, }) } |
然后,再页面中获取更改的名称:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 |
render() { const { navigate } = this.props.navigation; return ( .......... <View > <Text style={styles.typebox} onPress={() => this._loadProduct('分类6')}>分类6</Text> </View> </ScrollView> </View> <Text onPress={() => navigate('item')} >{this.state.catid ? this.state.catid : "首页1"}</Text> </View> |
看看效果把:
现在粘贴HomeScreen整体代码:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 139 140 141 142 143 144 145 146 147 148 149 150 151 152 153 154 155 156 157 158 159 160 161 162 163 164 165 166 167 168 169 170 171 172 173 174 175 176 |
import React, { Component } from 'react'; import { StyleSheet, Text, View, Image, //分类 ScrollView, //end 分类 //轮播图片加 Dimensions, //end 轮播图片加 } from 'react-native'; //轮播图片加 import ViewPager from 'react-native-viewpager'; var deviceWidth = Dimensions.get('window').width; //计算设备宽度 //end 轮播图片加 import { StackNavigator, } from 'react-navigation'; import { ItemScreen } from './ItemScreen'; //轮播图片加 const BANNER_IMGS = [ 'http://ac-c6scxa78.clouddn.com/f6b64dc4bf7bee56.jpg', 'http://ac-c6scxa78.clouddn.com/91ead58b0bb213b6.jpg', 'http://ac-c6scxa78.clouddn.com/d67316858f6c71f3.jpg', 'http://ac-c6scxa78.clouddn.com/c81c5b7be1838a1e.jpg', 'http://ac-c6scxa78.clouddn.com/54fe022399902788.jpg', ]; //end 轮播图片加 class HomeScreen extends Component { //轮播图片加 constructor(props) { super(props); // 用于构建DataSource对象 var dataSource = new ViewPager.DataSource({ pageHasChanged: (p1, p2) => p1 !== p2, }); // 实际的DataSources存放在state中 this.state = { dataSource: dataSource.cloneWithPages(BANNER_IMGS), catid: "", } } //ViewPager播放的内部图片 _renderPage(data, pageID) { return ( <Image source={{ uri: data }} style={styles.page} /> ); } //end 轮播图片加 _loadProduct(catid) { var that = this; console.log(catid); this.setState({ catid: catid, }) } static navigationOptions = { title: '首页', }; /** dataSource: 提供页面数据, renderPage: 用于渲染页面视图, autoPlay: 为true 将自动播放, isLoop: 为true支持循环播放, locked: 为true禁止触摸滚动, onChangePage: 页面变化的回调, renderPageIndicator: 渲染自定义的 ViewPager indicator. */ render() { const { navigate } = this.props.navigation; return ( <View style={styles.container} > <View style={styles.swiper}> <ViewPager style={this.props.style} //样式 dataSource={this.state.dataSource} renderPage={this._renderPage} isLoop={true} autoPlay={true} /> </View> <View style={styles.scrollviewclass}> <ScrollView showsHorizontalScrollIndicator={false} horizontal={true} > <View style={styles.active}> <Text style={styles.typebox} onPress={() => this._loadProduct('全部')}>全部</Text> </View> <View> <Text style={styles.typebox} onPress={() => this._loadProduct('分类1')} >分类1</Text> </View> <View > <Text style={styles.typebox} onPress={() => this._loadProduct('分类2')}>分类2</Text> </View> <View > <Text style={styles.typebox} onPress={() => this._loadProduct('分类3')}>分类3</Text> </View> <View > <Text style={styles.typebox} onPress={() => this._loadProduct('分类4')}>分类4</Text> </View> <View > <Text style={styles.typebox} onPress={() => this._loadProduct('分类5')}>分类5</Text> </View> <View > <Text style={styles.typebox} onPress={() => this._loadProduct('分类6')}>分类6</Text> </View> </ScrollView> </View> <Text onPress={() => navigate('item')} >{this.state.catid ? this.state.catid : "首页1"}</Text> </View> ); } } const styles = StyleSheet.create({ container: { flex: 1, alignItems: 'flex-start', flexDirection: 'column', backgroundColor: '#F6F6F6', }, welcome: { fontSize: 20, textAlign: 'center', margin: 10, }, instructions: { textAlign: 'center', color: '#333333', marginBottom: 5, }, //分类部分 scrollviewclass: { height: 50, width: deviceWidth, backgroundColor: 'white' }, active: { borderBottomWidth: 1, borderBottomColor: 'red', }, typebox: { width: 70, fontSize: 18, lineHeight: 35, textAlign: 'center', }, //分类部分 //轮播图片加 swiper: { flexDirection: 'row', height: 200, }, page: { width: deviceWidth, height: 200, }, //end 轮播图片加 }); const HomeApp = StackNavigator({ home: { screen: HomeScreen }, item: { screen: ItemScreen }, }); export default HomeApp; |