如何更改反应本机按钮的背景颜色

Posted 2023-02-22

【中文标题】如何更改反应本机按钮的背景颜色

【英文标题】：How to change background color of react native button

【发布时间】：2017-12-01 13:53:00

【问题描述】：

我正在尝试更改按钮的背景颜色，但似乎没有任何效果，我尝试了 raise 属性，也许我使用不正确。你们有什么想法吗？

 import React from 'react';
 import  StyleSheet, Text, View, Button, TouchableHighlight  from 'react-native';

export default class App extends React.Component 
state=
  name: "Mamadou"
;

myPress = () => 
  this.setState(
    name: "Coulibaly"
  );
;

  render() 
    return (
      <View style=styles.container>

          <Button       
          title=this.state.name
          color="red"
          onPress=this.myPress
        />   

      </View>

    );
  


const styles = StyleSheet.create(
  container: 
    flex: 1,
    backgroundColor: '#fff',
    alignItems: 'center',
    justifyContent: 'center',
  ,

);

【问题讨论】：

您应该接受您认为最能回答您问题的人的回答。

@Dan，截至目前，没有人提供有效的答案。

【参考方案1】：

您应该使用十六进制代码backgroundColor="#FF0000" 而不是color="red"。也请使用raised=true 其他明智的背景颜色不会被覆盖。

【讨论】：

这不适用于 react-native 组件。它不提供这些道具。

它对我有用，而其他所有都没有，但有一个更正它不需要 raise=true

【参考方案2】：

"color" 属性仅在您为 android 构建时适用于背景。

除此之外，我个人认为管理自定义按钮更容易。那就是创建您自己的名为 button 的组件，并将其作为带有文本的视图。这种方式更易于管理，您可以像 Button 一样简单地导入它。

【讨论】：

我如何实际创建一个新组件，我是新手反应原生lol。

=]] 您实际上在问题中显示了一个组件：export default class App extends React.Component App 是一个组件，您可以通过在顶部添加这样的行来导入它任何其他文件：从“/location/to/App/component”导入

【参考方案3】：

使用它为 ios 中的按钮添加背景颜色：

样式：

  loginScreenButton:
    marginRight:40,
    marginLeft:40,
   marginTop:10,
    paddingTop:10,
    paddingBottom:10,
    backgroundColor:'#1E6738',
    borderRadius:10,
    borderWidth: 1,
    borderColor: '#fff'
  ,
  loginText:
      color:'#fff',
      textAlign:'center',
      paddingLeft : 10,
      paddingRight : 10
  

按钮：

<TouchableOpacity
          style=styles.loginScreenButton
          onPress=() => navigate('HomeScreen')
          underlayColor='#fff'>
          <Text style=styles.loginText>Login</Text>
 </TouchableOpacity>

对于 Android，它仅适用于 Button color 属性：

<Button  onPress=onPressAction  title="Login"  color="#1E6738"  accessibilityLabel="Learn more about this button" />

【讨论】：

你回答的哪一部分改变了背景颜色？我是否需要与您拥有相同的边距才能使其发挥作用？

【参考方案4】：

我建议使用React Native Elements 包，它允许通过buttonStyle 属性插入样式。

样式：

const styles = StyleSheet.create(
   container: 
      flex: 1
   ,
   button: 
      backgroundColor: '#00aeef',
      borderColor: 'red',
      borderWidth: 5,
      borderRadius: 15       
   
)

渲染（）

render() 
   return (
      <View style=styles.container>
          <Button
             buttonStyle=styles.button
             title="Example"
             onPress=() => />
      </View>
   )

效果：

世博小吃：https://snack.expo.io/Bk3zI0u0G

【讨论】：

它在 ios 中不起作用，请您检查并建议我。

我不知道为什么我花了 4 到 8 个小时的间歇性谷歌搜索超过 2 天，才终于有人告诉我如何编辑按钮。我找到了buttonStyle，但似乎没人愿意提及您必须使用 "React Native Elements" 包中的 Button 组件才能使用 buttonStyle。谢谢

【参考方案5】：

这个答案有点晚了，但对其他人有好处。 为了解决这个问题，最好使用“文本”组件作为按钮

先把组件命名为AppButton

function AppButton(children,style,onPress) 
 return (
   <TouchableOpacity onPress=onPress>
    <Text
      style=[styles.appButton,style] >
      children
    </Text>
   </TouchableOpacity>
 );


export default AppButton;

然后将其导入您要使用的位置

import AppButton from './AppButton';

通过这一行，您可以调用您的自定义按钮，它实际上是一个您可以自定义它的文本。 记住 onPress 事件必须调用 TouchableOpacity 而不是 Text：

<AppButton style=styles.appOk onPress=()=> visibleFunc(false) >Ok</AppButton>