Цвет кнопки изменения изменить

Я хочу просто изменить цвет кнопки, но я не могу. Я попытался перейти непосредственно в кнопку и передать ему стиль. Но ни одна из них не работала. Вот мой очень простой код.

 export default class Dots extends Component {
  render() {
    return (
      <Image style={styles.container}  source={require('./background3.png')}>
      <Button title='play' style = {{color:'red'}}/>
      </Image>
    );
  }
}

const styles = StyleSheet.create({
  container: {
    flex:1,
    backgroundColor:'transparent',
    resizeMode:'cover',
    justifyContent:'center',
    alignItems:'center',
    width:null,
    height:null
  },

  button:{
  backgroundColor:'#ff5c5c',
  }

});

Ответ 1

Компонент реагировать Button отображает собственную кнопку на каждой используемой платформе. Из-за этого он не отвечает на опору style. У него есть свой набор реквизита.

Правильный способ его использования был бы

<Button color="#ff5c5c" title="I'm a button!" />

Вы можете увидеть документацию на https://facebook.github.io/react-native/docs/button.html

Теперь, скажем, вы хотите сделать супер настраиваемую кнопку, для этого вам придется использовать виды и прозрачность. Что-то вроде этого.

<TouchableOpacity onPress={...}>
  {... button markup}
</TouchableOpacity>

Вы заверните это в свой собственный компонент кнопки и будете использовать его.

Ответ 2

Я думаю, что определенно лучше использовать TouchableOpacity вместо тега Button, поскольку Button создает расхождения в стилях на платформах Android и iOS.

Вы можете использовать приведенный ниже код, и он выглядит очень похоже на кнопку и действует как единое целое:

 <TouchableOpacity
         style={styles.button}
         onPress={this.onPress}
       >
         <Text> Touch Here </Text>
 </TouchableOpacity>

const styles = StyleSheet.create({
  button: {
    alignItems: 'center',
    backgroundColor: '#DDDDDD',
    padding: 10
  }
})

Ответ 3

Кнопка Да не отвечает на стили. Но альтернативное решение состоит в том, что мы можем использовать компонент реакционно-нативного элемента.

Сначала установите пакеты, которые упомянуты ниже

npm install реактивные нативные элементы нпм я реагирую родной-линейный градиент Npm я реагирую-родной-векторные иконки

А затем импортируйте пакеты в ваш код

    import { Button } from 'react-native-elements';
    import LinearGradient from 'react-native-linear-gradient';
    import Icon from 'react-native-vector-icons/FontAwesome';

    <Button ViewComponent={LinearGradient} // Don't forget this!
    linearGradientProps={{
    colors: ['#ffffff','blue', 'grey'],
    start: { x: 0, y: 0.5 },
    end: { x: 1, y: 0.5 },
    }} onPress={()=> this.props.navigation.navigate('First')} title="Click me"/>

Для получения дополнительной информации здесь ссылка: https://react-native-elements.github.io/react-native-elements/docs/button.html