更改纸张按钮中的文本颜色

Question

我对 React Native 还比较陌生。

我可以轻松地显示按钮（带阴影等），如下所示。

 <Button
  mode="contained"
  color={'#f08e25'}
  contentStyle={{ height: 44 }}
  onPress={this.onPressSubmit}
  theme={theme} >SUBMIT </Button>

我也参考了这份文件。

https://callstack.github.io/react-native-paper/button.html#contentStyle

问题是如果模式是“包含”，我无法更改文本颜色。我在 contentStyle 或 theme 中尝试过，但它不起作用。如果模式是“包含”，我该如何更改文本颜色？

Answer 1

对于

mode="contained"

react-native-paper 按钮，

color

更改背景颜色，您需要

labelStyle

更改文本。对于

mode="flat"

按钮，

color

将更改文本。 您只需要添加

labelStyle

属性即可。例如，下面的代码将为您提供带有白色文本的橙色按钮：

<Button
  mode="contained"
  color="#f08e25"
  contentStyle={{ height: 44 }}
  labelStyle={{ color: "white", fontSize: 18 }}
  onPress={this.onPressSubmit}
  theme={theme} >
    SUBMIT 
</Button>

Answer 2

import * as React from 'react';
import { Button,Text } from 'react-native-paper';

const MyComponent = () => (
  <Button icon="camera" color="blue" dark={true} compact={true}  style={{color:"red",marginTop:100}} mode="contained" onPress={() => console.log('Pressed')}>
   <Text style={{color:"red"}}>press me</Text>
  </Button>
);

export default MyComponent;

这就是你的答案 在包含模式下，颜色显示所有按钮的颜色，而不仅仅是文本

Answer 3

onPressSubmit = () => {
    setState({flag:true})
}
<Button
  mode="contained"
  color={'#f08e25'}
  contentStyle={this.state.flag ? styleA : styleB}
  onPress={this.onPressSubmit}
  theme={theme} >SUBMIT </Button>

Answer 4

在v5.x中，您必须使用buttonColor和textColor，而不是颜色。

<Button
  mode = 'text'
  buttonColor={'#000'}
  textColor={'#fff'}
  className="mt-7"
  onPress={(id) => UpdateTripEvent(id)}>
  {'Confirm'}
</Button>