не может изменить цвет фона кнопки, которая импортирована из реактивной бумаги

Question

Я новичок, чтобы реагировать на родной после учебника. Я заметил, что нет никакой последовательности кнопок между android и iOS, поэтому я подумал, что попробую библиотеку реагировать на родную бумагу.

однако, после импорта кнопки из оригинальной бумаги у меня возникают проблемы с изменением цвета кнопки. цвет является постоянным цветом, как на изображении как цвет выглядит

как я могу манипулировать цветом? также есть ли лучшая библиотека, чтобы использовать для согласованности кнопок между Android и iOS?

спасибо

вот код:

// import stuff
import React from 'react';
import { View, Text, TextInput, TouchableOpacity } from 'react-native';
import {
  Provider as PaperProvider,
  DarkTheme,
  DefaultTheme,
  Button
} from 'react-native-paper';
// import { Button } from 'react-native-paper';

//create stuff

class App extends React.Component {

  state = {
    text: "",
    todo: []
  }
  addTodo = () => {
    var newTodo = this.state.text
    var arr = this.state.todo
    arr.push(newTodo)
    this.setState({ todo: arr, text: "" })
  }

  deleteTodo = (t) => {
    var arr = this.state.todo;
    var pos = arr.indexOf(t);
    arr.splice(pos, 1);
    this.setState({ todo: arr });


  }

  renderTodos = () => {
    return this.state.todo.map(t => {
      return (
        <TouchableOpacity key={t}>
          <Text
            style={styles.todo}
            onPress={() => { this.deleteTodo(t) }}
          >{t}</Text>
        </TouchableOpacity>
      )
    })
  } 
  render() {
    return (
      <PaperProvider>
      <View style={styles.wholeStyle}>
        <View style={styles.viewStyle}>
          <Text style={styles.header}>Notes App</Text>
          <TextInput
            style={styles.inputStyle}
            onChangeText={(text) => this.setState({ text })}
            value={this.state.text}
          />
          <Button 
          onPress={this.addTodo}
          mode='contained'
          backgroundColor='black'
          >Todo</Button>
          {this.renderTodos()}
        </View>
      </View>
      </PaperProvider>
    )
  }
}

const styles = {
  wholeStyle: {
    flex: 1,
    backgroundColor: '#0288D1'
    // backgroundColor: 'red'
  },
  viewStyle: {
    alignItems: 'center',
    justifyContent: 'center',
    margin: 10,
    marginTop: 30,

  },
  inputStyle: {
    alignSelf: 'stretch',
    height: 40,
    borderColor: "white",
    borderWidth: 1

  },
  header: {
    fontSize: 40,
    color: 'white',
    fontWeight: 'bold'

  },
  todo: {
    fontSize: 18,
    color: 'white'
  }


}
//export stuff

export default App;

из документов, labelStyle ОБНОВЛЕНИЕ: спасибо за обратную связь, мне удалось исправить свой код, добавив кнопку, используя свойство labelStyle для стилизации текста внутри кнопки, вот окончательный код, установив для кнопки черный фон и красный текст:

// import stuff
import React from 'react';
import { View, Text, TextInput, TouchableOpacity } from 'react-native';
import {
  Provider as PaperProvider,
  DarkTheme,
  DefaultTheme,
  Button
} from 'react-native-paper';
// import { Button } from 'react-native-paper';

//create stuff

class App extends React.Component {

  state = {
    text: "",
    todo: []
  }
  addTodo = () => {
    var newTodo = this.state.text
    var arr = this.state.todo
    arr.push(newTodo)
    this.setState({ todo: arr, text: "" })
  }

  deleteTodo = (t) => {
    var arr = this.state.todo;
    var pos = arr.indexOf(t);
    arr.splice(pos, 1);
    this.setState({ todo: arr });


  }

  renderTodos = () => {
    return this.state.todo.map(t => {
      return (
        <TouchableOpacity key={t}>
          <Text
            style={styles.todo}
            onPress={() => { this.deleteTodo(t) }}
          >{t}</Text>
        </TouchableOpacity>
      )
    })
  }
  render() {
    return (
      <PaperProvider>
        <View style={styles.wholeStyle}>
          <View style={styles.viewStyle}>
            <Text style={styles.header}>Notes App</Text>
            <TextInput
              style={styles.inputStyle}
              onChangeText={(text) => this.setState({ text })}
              value={this.state.text}
            />
            <Button
              onPress={this.addTodo}
              mode='contained'
              color='black'
              labelStyle={styles.button}
            >Todo</Button>
            {this.renderTodos()}
          </View>
        </View>
      </PaperProvider>
    )
  }
}

const styles = {
  wholeStyle: {
    flex: 1,
    backgroundColor: '#0288D1'
    // backgroundColor: 'red'
  },
  viewStyle: {
    alignItems: 'center',
    justifyContent: 'center',
    margin: 10,
    marginTop: 30,

  },
  inputStyle: {
    alignSelf: 'stretch',
    height: 40,
    borderColor: "white",
    borderWidth: 1

  },
  header: {
    fontSize: 40,
    color: 'white',
    fontWeight: 'bold'

  },
  todo: {
    fontSize: 18,
    color: 'white'
  },
  button: {
    color: 'red'
  },

}
//export stuff

export default App;

Answer 1

Я думаю, что в соответствии с react-native-paper Документами , Вы можете добавлять собственные стили в реквизит стиля. определите некоторый объект стиля в вашей таблице стилей и назначьте этот объект в вашей кнопке.

<Button 
 onPress={this.addTodo}
 mode='contained'
 style={styles.mybuttonstyles}>Todo
</Button>

//In Your Styles Section, 

const styles = StyleSheet.create({
 mybuttonstyles:{
  backgroundColor:'black'
  // all more styles you would like
 }

Я думаю, это должно работать. в react-native-elements кнопки , похоже. (вместо стиля вы должны предоставить свой объект стиля buttonStyle для пользовательских стилей.) Также убедитесь, что вы создали таблицу стилей и импортировали эту таблицу стилей, например

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

Answer 2

Глядя на react-native-paper Документы выглядит так: backgroundColor не является допустимой пропуском для передачи.

Используемая опора просто color, поэтому будет:

color:{ "black" }