react-native - 如何避免因更改主题而更新清除/轮廓按钮样式

Question

考虑一个使用 react-native-elements@1.1.0 中的 Button 的简单页面：

class App extends React.Component {
  render() {
    const theme = {
     // Use default
    };
    return (
      <ThemeProvider theme={theme}>
        <View style={styles.container}>
          <Button title="normal"/>
          <Button title="clear" type="clear"/>
          <Button title="outline" type="outline"/>
        </View>
      </ThemeProvider>
    )
  }
}

最初，它看起来像这样。

然后，我将在这里设置我的自定义主题。

class App extends React.Component {
  render() {
    const theme = {
      Button: {
        buttonStyle: {
          backgroundColor: 'green',
        },
      },
    };
    ...
  }
}

这个结果是：

不过，我想保留清晰/轮廓类型的背景样式。但是那个主题系统似乎不允许这样的定制。

有谁知道如何避免使用主题系统的这个问题？或任何解决方法。

谢谢。

Answer 1

您可以使用所需的所有属性创建主题，然后使用扩展运算符将主题仅添加到所需的按钮。

class App extends React.Component {
  render() {
    const theme = {
        buttonStyle: {
          backgroundColor: 'green',
        },
    };
    ...
    <Button title="normal" {...theme}/>
    <Button title="clear" type="clear"/>
    <Button title="outline" type="outline"/>
  }
}

Answer 2

我能够实现这一点的唯一方法是将 buttonStyle 添加到我不希望应用样式的特定清除按钮中。

const theme = {
    Button: {
      buttonStyle: { backgroundColor: primaryColor },
    },
  };

<ThemeProvider theme={theme}>
{your app}
</ThemeProvider>

...

<Button
  type='clear'
  buttonStyle={{ backgroundColor: undefined }}
  titleStyle={{ color: primaryColor }}>
</Button>

我结束了制作自己的组件来包装清除按钮react-native-elements，以便只需要进行一次更改。