Есть ли способ изменить стиль кнопки Button из функции обратного вызова onPress - PullRequest
Новая
       8

Есть ли способ изменить стиль кнопки Button из функции обратного вызова onPress

0 голосов
/ 27 июня 2018

enter image description here

Я новичок в React Native, и я пытаюсь сделать кнопку выбранной, а остальные просто не выбранной, поэтому, как и в Интернете, я удаляю весь выбранный класс со всех кнопок, а затем назначаю класс выбранной. .

Как я могу сделать это здесь?

Ответы [ 2 ]

0 голосов
/ 27 июня 2018 
import React, { Component } from 'react'
import {
  AppRegistry,
  StyleSheet,
  Text,
  View,
  Button
} from 'react-native'


class App extends Component {
  constructor(props) {
    super(props);
    this.state = {buttonClick: false};
  }
  onClickButton() {
    this.setState(previousState => {
        return {buttonClick: !previousState.buttonClick};
      });
  }
  render() {
    const cssButtonStyle = (this.state.buttonClick)? 'darkslateblue' : 'mediumturquoise';
    console.log(this.state.buttonClick);
    return (
      <View style={styles.container}>
        <Text style={styles.welcome}>
          Welcome to React Native!
        </Text>
        <Button
        color={cssButtonStyle}
        onPress={(event) => this.onClickButton(event)}
        title="Learn More"
        accessibilityLabel="Learn more about this purple button"
        />
      </View>
    )
  }
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
    backgroundColor: '#F5FCFF',
  },
  welcome: {
    fontSize: 20,
    textAlign: 'center',
    margin: 10,
  },
})

AppRegistry.registerComponent('App', () => App)

Вот чего на самом деле можно добиться с помощью React-Native. Он имеет только основные настройки. (https://facebook.github.io/react-native/docs/button).

Используйте приведенный выше код в этом месте: http://dabbott.github.io/react-native-web-player/

Вы можете использовать этот пакет npm для дополнительных настроек: https://github.com/ide/react-native-button

0 голосов
/ 27 июня 2018

По вашему вопросу, один из способов его решения - это поддержание состояния в конструкторе компонентов, например: this.state={selected: 0}. Целое число состояния selected будет индексом нажатой в данный момент кнопки среди кнопок в том же контейнере.

Предполагается, что вы назначаете кнопки с чем-то вроде 

buttons.map((button, index) => 
<Button>
 <Text>
  Some Text
 </Text>
</Button>)

Вы должны иметь возможность прикрепить key к каждому тегу Button с помощью index. Затем вы можете вызывать метод компонента в каждом Button, который использует key для установки selected состояния на index нажатой кнопки. И, наконец, вы можете визуализировать различные стили на основе выбранной в данный момент кнопки, проверив значение в состоянии.

...