第一次我的loadedItemStyle为6时，styles.item6正在运行。将状态更新为7后，样式不会更改为styles.item7。如果列表视图小于15则它工作正常。它怎么可能实现呢。
renderScene中的有一个按钮：changeItemSize（）这里我正在改变基于此的loadedItemStyle状态我在renderRow listview项目中更新样式 当列表项少于15时它正在工作否则它无法正常工作。
import React, { Component,PropTypes } from 'react';
import {
StyleSheet,
View,
Image,
Navigator,
TextInput,
TouchableOpacity,
Text,
Dimensions,
ListView,
ScrollView,
TouchableHighlight
} from 'react-native';
import GiftedSpinner from 'react-native-gifted-spinner';
var Icon = require('react-native-vector-icons/FontAwesome');
const logo = require('../../assets/splash-logo.png');
var width = Dimensions.get('window').width - 20;
var page = 6;
var mainRow = [];
class FeedUserGrid extends Component {
constructor(props) {
super(props);
var ds = new ListView.DataSource({
rowHasChanged: (r1, r2) => r1 != r2
});
this.state = {
...this.state,
dataSource:ds,
searchString:'',
search_result:PropTypes.node,
test_item:PropTypes.node,
loaded: false,
refreshing:false,
loadedItemStyle:6,
};
}
componentDidMount() {
this.fetchData();
}
fetchDataPhoto() {
fetch('https://jsonplaceholder.typicode.com/photos')
.then((response) => response.json())
.then((responseData) => {
this.setState({
search_result:responseData,
'loaded': true
});
this.setState({
dataSource:this.state.dataSource.cloneWithRows(this.state.search_result),
});
})
.done();
}
fetchData() {
fetch('https://jsonplaceholder.typicode.com/albums')
.then((response) => response.json())
.then((responseData) => {
console.log(responseData);
var limitDataLength = 20;
//mainRow.push(responseData);
for(let i=0; i< responseData.length; i++ ){
if(i < limitDataLength){
mainRow.push({
userId:responseData[i].userId,
id:responseData[i].id,
title:responseData[i].title,
});
}else if(limitDataLength == i){
break;
}
}
console.log(mainRow);
this.setState({
search_result:responseData,
dataSource: this.state.dataSource.cloneWithRows(mainRow),
'loaded': true
});
})
.done();
}
filterStates(searchText, states) {
var text = searchText.toLowerCase();
var rows = [];
console.log(states);
console.log(text);
for (let i=0; i < states.length; i++) {
var stateName = states[i].title.toLowerCase();
if(stateName.search(text) !== -1){
rows.push({
userId:states[i].userId,
id:states[i].id,
title:states[i].title,
});
}
}
console.log(rows);
this.setState({
dataSource: this.state.dataSource.cloneWithRows(rows),
loaded : true,
reloading:true,
});
}
setSearchText(event){
var searchText = event.nativeEvent.text;
this.setState({ searchString: searchText });
this.filterStates(searchText, this.state.search_result);
if (searchText === '') {
this.fetchData();
}
}
renderRow(rowData){
let itemStyleRow = () => {
switch (this.state.loadedItemStyle) {
case 6:
return styles.item6;
break;
case 7:
return styles.item7;
break;
case 8:
return styles.item8;
break;
case 9:
return styles.item9;
break;
case 10:
return styles.item10;
break;
default:
return styles.item6;
break;
}
}
return (
**
// ----------------------- calling ter itemStyleRow() updating
the style but it is not working more then 15 list item if it is less then 15 working fine how to fix this.
**
<View style={itemStyleRow()}>
<View style={ styles.s }>
<Text style={styles.price}>userId:{rowData.userId}</Text>
<Text style={styles.Itemtitle}>id:{rowData.id}</Text>
<Text style={[styles.Itemtitle]}>title:{rowData.title}</Text>
</View>
</View>
)
}
render() {
return (
<Navigator
renderScene={this.renderScene.bind(this)}
navigator={this.props.navigator}
navigationBar={
<Navigator.NavigationBar style={[styles.NavBar]}
routeMapper={NavigationBarRouteMapper} />
}
/>
);
}
configureScene(route, routeStack){
Navigator.SceneConfigs.FloatFromLeft;
}
renderScene(route, nav) {
return (
<View style={[styles.container]}>
<View style={[styles.SearchBar]}>
<View style={[styles.SearchParent]}>
<View style={[styles.IconSearchView]}>
<Icon name="search" style={[styles.IconSearch]} />
</ View>
<View style={[styles.input]}>
<TextInput
ref='searchString'
onChange={this.setSearchText.bind(this)}
value={this.state.searchString}
style={styles.searchInput}
placeholder='What Seasonal Food Are You Hungry For?'/>
</ View>
</ View>
</ View>
<View style={[styles.header_item,styles.GridViewContainer]}>
{ !this.state.loaded &&
<GiftedSpinner />
}
</View>
<ScrollView ref="scrollView" style={{flex: 1, position:'absolute',top:50,left:0,right:0,bottom:50}} >
{
this.state.loaded &&
<ListView
refreshing={this.state.refreshing}
contentContainerStyle={{
flex: 1,
flexDirection: 'row',
flexWrap: 'wrap',
justifyContent: 'center',
alignItems:'center'
}}
dataSource={this.state.dataSource}
renderRow={this.renderRow.bind(this)}/>
}
</ScrollView>
// ------------- Here changeItemSize() I am changing the setState loadedItemStyle -------------------------------------
<View style={[styles.BottomBar]}>
<TouchableOpacity onPress={this.changeItemSize.bind(this)}>
<View style={[styles.selectedItemView]}>
<Icon name="cutlery" style={[styles.iconItemSetting,styles.navBarBottomIcon,styles.selectedItem]} />
</ View>
</ TouchableOpacity>
</ View>
</ View>
);
//return <route.component {...route.passProps} navigator={navigator} />
}
changeItemSize(){
page+=1
if(page == 11){
page = 6;
}
switch (page) {
case 6:
this.setState({
loadedItemStyle:6,
}, function() {
alert(this.state.loadedItemStyle);
// loadedItem style changed
});
break;
case 7:
this.setState({
loadedItemStyle:7,
}, function() {
});
break;
case 8:
this.setState({
loadedItemStyle:8,
}, function() {
});
break;
case 9:
this.setState({
loadedItemStyle:9,
}, function() {
});
break;
case 10:
this.setState({
loadedItemStyle:10,
}, function() {
});
break;
default:
this.setState({
loadedItemStyle:6,
}, function() {
});
break;
}
}
}
const styles = StyleSheet.create({
item6:{
width: width / 3 - 20,
height: width / 3 - 20,
backgroundColor:'#ededed',
marginTop:5,
marginBottom:5,
marginRight:10,
marginLeft:10,
alignItems:'center',
borderRadius:10,
borderColor:'black',
borderWidth:0.1,
},
item7:{
width: width / 1,
height: width / 4 - 20,
backgroundColor:'#ededed',
marginTop:3,
marginBottom:3,
marginRight:10,
marginLeft:10,
alignItems:'center',
borderRadius:10,
borderColor:'black',
borderWidth:0.5,
},
item8:{
width: width / 1,
height: width / 3,
backgroundColor:'#ededed',
marginTop:3,
marginBottom:3,
marginRight:10,
marginLeft:10,
alignItems:'center',
borderRadius:10,
borderColor:'black',
borderWidth:0.5,
},
item9:{
width: width / 1,
height: width / 2,
backgroundColor:'#ededed',
marginTop:3,
marginBottom:3,
marginRight:10,
marginLeft:10,
alignItems:'center',
borderRadius:10,
borderColor:'black',
borderWidth:0.5,
},
item10:{
width: width / 1,
height: width / 1.3,
backgroundColor:'#ededed',
marginTop:3,
marginBottom:3,
marginRight:10,
marginLeft:10,
alignItems:'center',
borderRadius:10,
borderColor:'black',
borderWidth:0.5,
}
});
module.exports = FeedUserGrid;