Как передать значение как пропеллер и вставить в компонент как стиль CSS (React Native)? - PullRequest
Новая
       35

Как передать значение как пропеллер и вставить в компонент как стиль CSS (React Native)?

0 голосов
/ 04 мая 2018

У меня есть функциональный компонент многократного использования под названием CardSection. Я хочу передать использовать разные значения flex для разных компонентов CardSection.

Из-за этого я хочу передать значение flex как опору в компонент CardSection. E.g.:

<CardSection flex='1' /> <CardSection flex='3' />

Однако, если я пытаюсь добавить пару ключ-значение для flex в мой объект стиля, я получаю ошибку, потому что я пытаюсь установить ключ flex со значением для объекта, который должен быть неизменны: 

import React from 'react';
import { View } from 'react-native';

const CardSection = props => {
  styles.container.flex = props.flex;  // <---- Causes mutation error

  return (
    <View style={styles.container}>
      {props.children}
    </View>
  );
};

const styles = {
  container: {
    borderBottomWidth: 1,
    padding: 5,
    backgroundColor: '#fff',
    justifyContent: 'space-between',
    borderColor: '#ddd',
    position: 'relative',
    borderWidth: 2,
    borderColor: 'red',
  }
};

export default CardSection;

Каков наилучший способ вставки пользовательских значений flex в этом случае?

Ответы [ 4 ]

0 голосов
/ 15 января 2019

вы можете создать свойство объекта таблицы стилей как функцию. затем вы вызвали свойство styles как функцию. 

class Main extends React.Component {
  render() {
    containerStyle = styles.container(this.props.flex)
    return <View style={containerStyle}>{props.children}</View>;
  }
}

const styles  = StyleSheet.create({
  container: (flexValue) => {
    flex: flexValue,
    borderBottomWidth: 1,
    padding: 5,
    backgroundColor: "#fff",
    justifyContent: "space-between",
    borderColor: "#ddd",
    position: "relative",
    borderWidth: 2,
    borderColor: "red"
  }
});
0 голосов
/ 04 мая 2018

Вы не должны мутировать объект. Создайте свежий объект и назначьте: 

const CardSection = props => {
  const containerStyle = { ...style.container, props.flex }

  return (
    <View style={containerStyle}>
      {props.children}
    </View>
  );
};
0 голосов
/ 06 октября 2018

вы можете сделать это следующим образом 

import React from "react";
import { View, StyleSheet } from "react-native";

class Main extends React.Component {
  static getCardStyle(flexValue) {
    return StyleSheet.create({
      container: {
        flex: flexValue,
        borderBottomWidth: 1,
        padding: 5,
        backgroundColor: "#fff",
        justifyContent: "space-between",
        borderColor: "#ddd",
        position: "relative",
        borderWidth: 2,
        borderColor: "red"
      }
    });
  }
  render() {
    return <View style={getCardStyle(this.props.flex).container}>{props.children}</View>;
  }
}

export default Main;
0 голосов
/ 04 мая 2018

Использовать композицию вместо мутации: 

style={[styles.container, { flex: props.flex }]}

Также используйте число для flex: <CardSection flex={1} />.

...