reactjs 如何更改响应本地按钮的背景颜色

cdmah0mi 于 2023-01-25 发布在 React

关注(0)|答案(6)|浏览(156)

我试图改变我的按钮的背景色，但似乎没有什么工作，我尝试了提高属性，也许我使用它不正确。你们有任何想法？

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',
  },

});

reactjs

来源：https://stackoverflow.com/questions/44798426/how-to-change-background-color-of-react-native-button

6条答案

按热度按时间

9w11ddsr1#

使用此选项可在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  onPress={onPressAction}  title="Login"  color="#1E6738"  accessibilityLabel="Learn more about this button" />

赞(0）回复(0）举报 2023-01-25

myss37ts2#

我建议使用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

赞(0）回复(0）举报 2023-01-25

rm5edbpk3#

“color”属性仅适用于为android构建的背景。
除此之外，我个人觉得管理自定义按钮更容易。也就是创建自己的组件，命名为按钮，并将其作为一个带有文本的视图。这种方式更易于管理，您可以像按钮一样轻松地导入它。

赞(0）回复(0）举报 2023-01-25

2izufjch4#

这个答案有点晚，但对其他人来说是好的。2要解决这个问题，最好使用“文本”组件作为按钮
首先创建一个名为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中调用，而不是文本：

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

赞(0）回复(0）举报 2023-01-25

slhcrj9b5#

也许Pressable就是你要找的它允许你添加样式到一个可按下的组件（如一个按钮）。Read more here

- 样品代码：**

import React from 'react';
import { Text, View, StyleSheet, Pressable } from 'react-native';

export default function Button(props) {
  const { onPress, title = 'Save' } = props;
  return (
    <Pressable style={styles.button} onPress={onPress}>
      <Text style={styles.text}>{title}</Text>
    </Pressable>
  );
}

const styles = StyleSheet.create({
  button: {
    alignItems: 'center',
    justifyContent: 'center',
    paddingVertical: 12,
    paddingHorizontal: 32,
    borderRadius: 4,
    elevation: 3,
    backgroundColor: 'black',
  },
  text: {
    fontSize: 16,
    lineHeight: 21,
    fontWeight: 'bold',
    letterSpacing: 0.25,
    color: 'white',
  },
});

赞(0）回复(0）举报 2023-01-25

sczxawaw6#

您应该使用十六进制代码backgroundColor="#FF0000"而不是color="red"。也请使用raised={true}，否则背景色不会被覆盖。

赞(0）回复(0）举报 2023-01-25