Упрощенное изменение стиля на Press React Native - PullRequest
Новая
       70

Упрощенное изменение стиля на Press React Native

1 голос
/ 26 февраля 2020

Ниже приведена первая попытка научиться просто изменять стиль элемента onPress в реагировать на нативный. Хорошо разбираясь в веб-языках, я нахожу это трудным, поскольку он не так прост.

По причинам, которые пока неизвестны, для выполнения элемента требуется два щелчка. 

export class NavTabItem extends React.Component {
    constructor(props) {
        super(props);
        this.state = {
            active: false
        }
        this.NavTabAction = this.NavTabAction.bind(this)
    }

    NavTabAction = (elem) => {
        elem.setState({active: !elem.state.active})
    }

    render() {
        return (
            <TouchableOpacity
            style={this.state.active ? styles.NavTabItemSelected : styles.NavTabItem}
            onPress={()=> {
                this.NavTabAction(this)
            }}>
                <View style={styles.NavTabIcon} />
                <Text style={styles.NavTabLabel}>{this.props.children}</Text>
            </TouchableOpacity>
     );
  }
}

Другие проблемы:

Я также не выяснил, как средство установки активного состояния в false для других элементов под родительским элементом при нажатии.

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

, например. таблица стилей, которая читает NavTabItemSelected Text :{ // active style for <Text> }

Ответы [ 2 ]

1 голос
/ 26 февраля 2020

Вместо того, чтобы звонить elem.setState или elem.state, это должны быть this.setState и elem.state. 

NavTabAction = (elem) => {
    this.setState(prev => ({...prev, active: !prev.active}))
}

И вместо передачи this в onPress, вы должны просто передать ссылку на функцию. 

onPress={this.NavTabAction}>

Вы также должны удалить эту строку, потому что вы используете функцию стрелки 

// no need to bind when using arrow functions
this.NavTabAction = this.NavTabAction.bind(this)

Кроме того, существует ли простой способ повлиять на стиль дочерние элементы, такие как в Интернете

Вы можете проверить styled-component, но я думаю, что эта функция еще не существует для реагирования на нативный. Что вы должны сделать, это передать реквизиты дочерним компонентам.

0 голосов
/ 26 февраля 2020

Спасибо всем за помощь в этом и за то, что разбирались с некоторыми другими частями кода.

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

Причина:

Использование setState корректно отображало переменные. Это можно было увидеть в консоли через console.log () и напрямую вывести на рендер, делая их видимыми.

Однако, что бы ни пытались, это не обновляло стиль. Было ли это имя стиля из таблицы стилей или встроенных стилей, они обновлялись бы по второму щелчку, а не по первому, но все равно до параметров первого. Таким образом, если при первом щелчке кнопка изменит цвет с красного на зеленый, это не произойдет, даже если новое состояние отобразилось. Однако если последующий щелчок должен был повернуть кнопку обратно в красный цвет, то кнопка теперь будет go зеленой (как это должно было быть для первого щелчка). Затем он будет go красным при третьем щелчке, по-видимому, всегда на один шаг позади статуса, переданного ему.

Решение

Чтобы исправить это, снимите стиль с основной элемент (простите терминологию, кто-то редактирует), в моем случае, элемент TouchableOpacity. Добавьте дочерний элемент View и вместо этого поместите стили в этот элемент View вместе с тернарным оператором и wallah.

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

Окончательный код: 

export class NavTabItem extends React.Component {
    constructor(props) {
        super(props);
        this.state = {
            active: false
        }
    }

    NavTabAction = () => {
        this.setState({active: !this.state.active})
    }

    render() {
        this.state.active == true ? console.log("selected") : console.log("unselected")
        return (
            <TouchableOpacity onPress={this.NavTabAction}>

              // added View containing style and ternary operator

                <View style={this.state.active == true ? styles.NavTabItemSelected : styles.NavTabItem}>
                    <View style={styles.NavTabIcon} />
                    <TextCap11 style={styles.NavTabLabel}>{this.props.children}</TextCap11>
                </View>

              // End added view

            </TouchableOpacity>
     );
  }
}
...