response-native-elements Кнопка backgroundColor не работает - PullRequest
0 голосов
/ 19 февраля 2019

Я новичок в React Native.В моем простом тестовом приложении я хочу попробовать с помощью response-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/>
    );
  }
}

Что такоеЯ делаю неправильно?

См фактический результат

See actual result

1 Ответ

0 голосов
/ 19 февраля 2019

Используйте опору ниже, чтобы сделать фон красным в реагирующих на нативных элементах.

buttonStyle={{backgroundColor: 'red'}}

Вы должны отредактировать стиль кнопки в реагирующих на нативных элементах, используя опору buttonStyle .

Вот рабочий код.Здесь кнопка красная.

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

Более подробную информацию о реквизитах элементов вact-native-elements можно найти вссылка ниже, реквизит кнопок

...