通过自定义组件中的道具设置样式的正确方法

Question

在我的某些屏幕上，我有一些小文本用作链接。看起来像这样：

因为它看起来更多，所以一旦我创建了一个名为“ 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>
  );
};

谢谢。