خرید بک لینک

Vote count: 0

I am leaing react native and i tried to use react-native-grid-view for grid based layout. I want to show 3 images per row. But i am getting an error stating 'items.forEach is not a function'. What might be the issue?

Below is my code

const data = [
        {image:require('./assets/img/Alcohol1.png'),price:1},
        {image:require('./assets/img/Bakery1.png'), price:2},
        {image:require('./assets/img/Beverages1.png'), price:3},
        {image:require('./assets/img/Alcohol1.png'), price:4},
        {image:require('./assets/img/FoodCupboard.png'), price:5},
        {image:require('./assets/img/Health&Beauty.png'), price:6},
    ]
const ds = new ListView.DataSource({ rowHasChanged: (row1, row2) => row1 !== row2 });
const CATEGORIES_PER_ROW = 3;

class Category extends Component{
    render(){
        console.log('props value',this.props.category);
        retu(
                <View style={styles.category}>
                    <Image source={this.props.category.image} style={styles.thumbnail} />
                    <View>
                        <Text 
                            style={styles.price}
                            numberOfLines={3}>{this.props.category.price}</Text>
                    </View>
                </View>
            )
    }
}

export default class Main extends Component{
    constructor(props){
        super(props);
        this.state = {
            isRefreshing:false,
            dataSource: ds.cloneWithRows([]),
        }
        this.renderItem = this.renderItem.bind(this);
    }

    componentWillMount() {
        console.log(data);
        this.setState({
            dataSource:ds.cloneWithRows(data),
            isRefreshing:true
        });
    }

    render() {
        if (!this.state.isRefreshing) {
          retu this.renderLoadingView();
        }

    retu (
      <GridView
        items={this.state.dataSource}
        itemsPerRow={CATEGORIES_PER_ROW}
        renderItem={this.renderItem}
        style={styles.listView}
      />
    );
  }

      renderLoadingView() {
        retu (
          <View>
            <Text>
              Loading Categories...
            </Text>
          </View>
        );
      }

      renderItem(item){
        console.log('item',item);
        retu <Category category={item} />
      }
}

asked 24 secs ago

برچسب: نویسنده: استخدام کار تاريخ: شنبه 19 تير 1395 ساعت: 12:49

صفحه بندی