Как убрать border у каждого второго элемента react native?

219

23 февраля 2018, 20:10

Всем привет! Пишу приложение на react native и мне нужно , что бы граница с лева была через элемент , а не у каждого. Как реализовать?

import React, { Component } from 'react';
import { Image } from 'react-native';
import { View, Col, Card, CardItem, Body, Button , Icon } from 'native-base';
import { Actions } from 'react-native-router-flux';
// Our custom files and classes import
import Colors from '../Colors';
import Text from './Text';
export default class product extends Component {
  render() {
    return(
      <Col style={this.props.isRight ? style.leftMargin : style.rightMargin}>
        <View transparent>
            <View cardBody style={style.bordered}>
              <Button transparent style={style.button} onPress={() => this.pressed()}>
                <Image source={{uri: this.props.product.image}} style={style.image}/>
                <View style={style.border} />
              </Button>
            </View>
            <CardItem style={{paddingTop: 0}}>
            <Button style={{flex: 1, paddingLeft: 0, paddingRight: 0, paddingBottom: 0, paddingTop: 0}}
              transparent
              onPress={() => this.pressed()}
            >
                <Body>
                    <Text
                      style={{fontSize: 14}}
                      numberOfLines={1}
                    >{this.props.product.title}</Text>
                    <View style={{flex: 1, width: '100%', alignItems: 'center'}}>
                      <Text style={style.price}>{this.props.product.price}</Text>
                      <Button block onPress={this.addToWishlist.bind(this)} icon transparent style={{backgroundColor: '#fdfdfd'}}>
                        <Icon style={{color: Colors.navbarBackgroundColor}} name='ios-heart' />
                      </Button>
                    </View>
                </Body>
              </Button>
            </CardItem>
          </View>
      </Col>
    );
  }
  pressed() {
    Actions.product({product: this.props.product});
  }
  addToWishlist() {
    var product = this.state.product;
    var success = true;
    AsyncStorage.getItem("WISHLIST", (err, res) => {
      if(!res) AsyncStorage.setItem("WISHLIST",JSON.stringify([product]));
      else {
        var items = JSON.parse(res);
        if(this.search(items, product)) {
          success = false
        }
        else {
          items.push(product);
          AsyncStorage.setItem("WISHLIST",JSON.stringify(items));
        }
      }
      if(success) {
        Toast.show({
          text: 'Товар добавлен в список желаний!',
          position: 'bottom',
          type: 'success',
          buttonText: 'Закрыть',
          duration: 3000
        });
      }
      else {
        Toast.show({
          text: 'Товар уже в спике желаний!',
          position: 'bottom',
          type: 'danger',
          buttonText: 'Закрыть',
          duration: 3000
        });
      }
    });
  }
}
const style = {
  button: {flex: 1, height: 300, paddingLeft: 4, paddingRight: 4} ,
  image: {height: 250, width: null, flex: 1},
  leftMargin: {
    marginLeft: 7,
    marginRight: 0,
    marginBottom: 7
  },
  bordered: {
    borderRightWidth: 1,
    borderColor: '#0e0e0e'
  },
  rightMargin: {
    marginLeft: 0,
    marginRight: 7,
    marginBottom: 7
  },
  border: {
    position: 'absolute',
    top: 10,
    left: 10,
    right: 10,
    bottom: 10,
    borderWidth: 1,
    borderColor: 'rgba(253, 253, 253, 0.2)'
  },
  price: {
    fontSize: 16,
    paddingLeft: 5,
    paddingRight: 5,
    zIndex: 1000,
    backgroundColor: '#fdfdfd'
  },
  line: {
    width: '100%',
    height: 1,
    backgroundColor: '#7f8c8d',
    position: 'absolute',
    top: '52%'
  }
}

ПОСЛЕДНИЕ ВОПРОСЫ

Все вопросы

ТОП-10

Все популярные вопросы

Скрыть/показать checkbox

Помогите,пожалуйста, есть код:

239

javascript

Сравнить время JS

Всем привет, мне нужно сравнить текущее время с временем из определенной колонки и последней строки таблицыВот код который сейчас написан:

212

javascript

Цепные методы в JS

Поставлена задача: написать калькулятор, который включает в себя различные операции (+ - * / ^) с поддержкой цепных методовТак же должен учитываться...

308

javascript

Кастомный синтаксис post-css

Прошу помощи в решении задачиПри написании плагина post-css хотелось бы ввести несколько ключевых слов в правила css, например:

265