Правильный способ установки стиля с помощью реквизита в пользовательском компоненте - PullRequest
Новая
       39

Правильный способ установки стиля с помощью реквизита в пользовательском компоненте

0 голосов
/ 14 января 2020

В некоторых из моих экранов у меня есть небольшой текст, используемый в качестве ссылки. Это выглядит так: enter image description here

Так как он появляется больше, чем когда я создал компонент с именем "BottomHelp".

Теперь дело в том, что он немного меняется с экрана на экран, иногда текст белый или выровненный по правому краю, поэтому я создал несколько стилей в своей таблице стилей и пропустил требование через реквизит. Вот так: 

      <BottomHelp
      Text1="You are not a member?"
      Color1="black"
      Text2="Register."
      Color2="red"
      Align="left" />

Вот часть, в которой я понял, что все это может быть неуклюжим.

Как вы видите ниже, есть словарь для установки правильного стиля в зависимости от заданного реквизита.

Помимо того, что выглядит неуклюже, он также в настоящее время не работает (стили не применяются), но, вероятно, скоро его решит. 

const BottomHelp = props => {
  const styleCase = {
    con: {
      right: styles.bottomHelpContainerRight,
      left: styles.bottomHelpContainerLeft,
    },
    text1: {
      black: styles.bottomHelpText1Black,
      white: styles.bottomHelpText1White,
    },
    text2: {red: styles.bottomHelpText2Red},
  };

  return (
    <View style={styleCase['con'][props.Align]}>
      <Text style={styleCase['text1'][props.Text1]}>{props.Text1}</Text>
      <TouchableWithoutFeedback
        onPress={() => {
          alert('Register');
        }}>
        <Text style={styleCase['text2'][props.Text2]}>{props.Text2}</Text>
      </TouchableWithoutFeedback>
    </View>
  );
};

Спасибо.

...