react-native-elements 按钮背景颜色不起作用

Posted 2023-03-31

【中文标题】react-native-elements 按钮背景颜色不起作用

【英文标题】：react-native-elements Button backgroundColor not working

【发布时间】：2019-02-18 23:16:46

【问题描述】：

我是 React Native 的新手。在我的简单测试应用程序中，我想尝试使用 react-native-elements button

但是，我无法显示按钮背景颜色。

我按照文档并尝试添加这样的按钮：

import React,  Component  from 'react';
import  Text, View  from 'react-native';
import  Button  from 'react-native-elements';

export default class loginForm extends Component 
  render() 
    return (
      <View>
        <Button
            backgroundColor='red'
            title='Login' 
            />
      </View>
    )
  

在 App.js 中，我像这样导入它：

import React from 'react';
import  StyleSheet, Text, View, TouchableHighlight, TextInput  from 'react-native';
import  createStackNavigator, createBottomTabNavigator, createAppContainer  from 'react-navigation';
import loginForm from './app/src/components/loginForm.js'

const TestStack = createStackNavigator(
  
    Login: screen: loginForm
  
)

const AppContainer = createAppContainer(TestStack);

export default class App extends React.Component 

  constructor(props) 
    super(props);
  

  render() 
    return (
      <AppContainer/>
    );
  

我做错了什么？

查看实际结果

【参考方案1】：

使用下面的道具使 react-native-elements 中的背景变为红色。

buttonStyle=backgroundColor: 'red'

您应该使用 buttonStyle 属性在 react-native-elements 中编辑按钮的样式。

这是工作代码。这里的按钮是红色的。

export default class App extends React.Component 

  constructor(props) 
    super(props);
  

  render() 
    return (
      <View>
        <Button
            title='Login' 
            buttonStyle=
              backgroundColor:'red'
            
            />
      </View>
    );
  

这是一个工作代码， https://snack.expo.io/BkRgH0_HE

您可以在下面的链接中找到有关 react-native-elements 中元素的 props 的更多信息， Props of Buttons

【讨论】：

谢谢你的作品，我只是很困惑，因为这里的这个文档显然有我的帖子react-native-training.github.io/react-native-elements/docs/…中显示的方法的例子@

@jacobMarsellos 我看不到背景颜色的任何示例。如果您查看 Button 的道具，您会发现 backgroundColor 不是其中之一。所以，你不能那样使用它。

不知何故这并没有改变颜色。在 ios 上，按钮总是没有背景颜色，而在 android 上，它们总是蓝色。唯一对我有用的是使用 react-native-elements 中的按钮：github.com/react-native-elements/react-native-elements