react-native-elements 按钮 backgroundColor 不工作

Question

我是 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/>
    );
  }
}

我做错了什么？

查看实际结果

Answer 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

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

react-native-elements 按钮 backgroundColor 不工作

react-native-elements Button backgroundColor not working

mobile

ios

react-native

react-native-elements