image.png
RN自學階段，用FlatList寫了一下分類頁面，話不多說，直接上代碼
/**
* Created by Rathen on 2018/7/11.
*/
import React, {Component} from 'react';
import {
Platform,
StyleSheet,
Text,
View,
Alert,
FlatList,
TouchableHighlight,
Image,
} from 'react-native';
import API from '../Tool/api';//接口文件
import Http from '../Tool/HttpRequest';//用于網絡請求，直接替換就行了
import Tool from '../Tool/Tool'//定義了屏幕寬高
export default class Categary extends Component {
componentDidMount()
{
console.log('進入了componentDidMount');
this.fetchData();//請求網絡數據，這里就不在解釋了
}
static navigationOptions = ({navigation})=>({
title:'分類',
});
state = {//根據各自后臺的數據來設定需要的屬性
data:[],//數據數組
right: [],//選中后右邊list的數據數據
selectedIndex: 0,//第幾個選中
height: 0,
};
render() {
return (
<View style={{flex: 1}}>
<View style={{backgroundColor: '#f4f4f4', flex: 1}} onLayout={this.onLayout}>
<View style={{height: 0.5, backgroundColor: '#e6e6e6'}}/>
<View style={{flexDirection: 'row', width: Tool.width, flex: 1}}>
<View style={{width: 90, backgroundColor: '#e6e6e6'}}>
<View style={{
alignItems: 'center',
justifyContent: 'center',
backgroundColor: 'white',
height: 45
}}>
<Text style={{fontSize: 14, color: '#f60'}}>推薦分類</Text>
</View>
<FlatList
ref={'left'}
style={{flexGrow: 1}}
data={this.state.data}
keyExtractor={(item, index) => index.toString()}
renderItem={this.renderLeftItem}
showsVerticalScrollIndicator={false}
/>
</View>
<FlatList
style={{flexGrow: 1}}
data={this.state.right}
keyExtractor={(item, index) => index.toString()}
renderItem={this.renderRightItem}
showsVerticalScrollIndicator={false}
/>
</View>
</View>
</View>
);
}
onLayout = (event) => {//當組件掛載或者布局變化的時候調用
let {height} = event.nativeEvent.layout;
this.setState({height: height})
};
renderRightItem = ({item, index}) => (
<View style={{marginLeft: 10, marginRight: 10,}}>
<Text style={{
fontSize: 14,
color: '#333',
marginTop: index === 0 ? 10 : 0,
marginBottom: 10
}}>{item.category_name}</Text>
<View style={{backgroundColor: 'white', flex: 1, marginBottom: 10}}>
<FlatList
style={{}}
data={item.cateList}
numColumns={3}
keyExtractor={(item, index) => index.toString()}
renderItem={({item, index}) => this.renderLevel3(item)}
showsVerticalScrollIndicator={false}
/>
</View>
</View>
);
renderLevel3 = (item) => (
<TouchableHighlight underlayColor='#f0f0f0' onPress={() => {
let url = '';
switch (item.operation_type) {
case 1:
this.props.navigation.navigate('SearchResultView', {
code: item.href, key: item.operation_content
});
break;
case 2://專題
this.props.navigation.navigate("OtherWebView", {url: Api.WebApi + "/homepage/showView?viewID=" + item.href});
break;
case 3://url
this.props.navigation.navigate("OtherWebView", {url: item.href});
break;
case 4:
this.props.navigation.navigate('SearchResultView', {
key: item.href
});
break;
}
}}>
<View style={{alignItems: 'center', width: (Tool.width - 110) / 3, marginBottom: 10}}>
<Image source={{uri: item.category_pic}}
style={{height: 65, width: 65, marginTop: 10, marginBottom: 3}}/>
<Text style={{fontSize: 12, color: "#333"}}>{item.category_name}</Text>
</View>
</TouchableHighlight>
);
renderLeftItem = ({item, index}) => {
console.log(item);
return (
<View>
<View style={{height: 0.5, backgroundColor: '#e6e6e6'}}/>
<TouchableHighlight underlayColor='#ccc' onPress={() => this.onSelected(index)}>
<View
ref={(ref) => this.selectedView = {...this.selectedView, [`left${index}`]: ref}}
style={{
alignItems: 'center',
justifyContent: 'center',
backgroundColor: index === 0 ? '#f60' : 'white',
height: 45
}}>
<Text
ref={(ref) => this.selectedText = {...this.selectedText, [`left${index}`]: ref}}
style={{
fontSize: 14,
color: index === 0 ? 'white' : '#333'
}}>{item.category_name}</Text>
</View>
</TouchableHighlight>
</View>
)
};
onSelected = (index) => {
var length = this.state.data.length;
for (var i = 0; i < length; i++) {
if (i === index) {
this.selectedView['left' + i].setNativeProps({
style: {
alignItems: 'center',
justifyContent: 'center',
backgroundColor: '#f60',
height: 45
}
});
} else {
this.selectedView['left' + i].setNativeProps({
style: {
alignItems: 'center',
justifyContent: 'center',
backgroundColor: '#fff',
height: 45
}
});
}
}
for (var i = 0; i < length; i++) {
if (i === index) {
this.selectedText['left' + i].setNativeProps({
style: {
fontSize: 14,
color: 'white'
}
})
} else {
this.selectedText['left' + i].setNativeProps({
style: {
fontSize: 14,
color: '#333'
}
})
}
}
setTimeout(() => {
this.setState({selectedIndex: index, right: this.state.data[index].cateList});
}, 50);
};
fetchData = async () => {
console.log('開始網絡請求httpRequestUrl');
try {
let response = await Http.get(API.CATEGORY);
console.log('分類頁面' + response);
if (response.data.code == '0000') {
this.setState({
data: response.data.respBody.list,
right: response.data.respBody.list[0].cateList,
})
} else {
console.log('獲取網絡請求失敗');
}
} catch (err) {
console.log('獲取網絡請求出錯了' + err.response);
}
}
}
const styles = StyleSheet.create({
container: {
flex: 1,
justifyContent: 'center',
alignItems: 'center',
backgroundColor: '#F5FCFF',
},
welcome: {
fontSize: 20,
textAlign: 'center',
margin: 10,
},
instructions: {
textAlign: 'center',
color: '#333333',
marginBottom: 5,
},
});
