简化样式更改 onPress React Native

Question

以下是学习在 react native 中简单地更改元素 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。

另外，有没有一种简单的方法来影响子元素的样式，就像 web.xml 一样。目前我看不到父样式通过选择器影响子元素的方法，就像你可以使用 CSS 一样

例如。一个样式表，上面写着NavTabItemSelected Text :{ // active style for <Text> }

Answer 1

不应调用elem.setState 或elem.state，而应调用this.setState 和elem.state。

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

而不是在onPress 中传递this，您应该只传递函数的引用。

onPress={this.NavTabAction}>

您还应该删除此行，因为您正在使用箭头功能

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

另外，有没有一种简单的方法可以像web一样影响子元素的样式

您可以查看styled-component，但我认为该功能尚不存在用于 react native。你应该做的是将 props 传递给子组件。

Answer 2

感谢大家对此的帮助，并用代码整理了一些其他的点点滴滴。

然而，问题在于样式在第二次点击时发生了变化。几个小时后，我为任何遭受此痛苦的人找到了原因和解决方案。如果任何回答过这个问题的更有经验的人认为这个答案不正确或者他们有更好的答案，请发布它，但目前这是我找到的唯一解决方法。

原因：

使用 setState 可以正确地重新渲染变量。这既可以通过 console.log() 在控制台中看到，也可以直接在渲染中输出，使它们可见。

但是，无论怎么尝试，这都没有更新样式。无论是样式表中的样式名称还是内联样式，它们都会在第二次单击而不是第一次单击时更新，但仍会更新为第一次单击的参数。因此，如果第一次单击应该使按钮从红色变为绿色，即使新状态已呈现，它也不会这样做。但是，如果随后的单击应将按钮变回红色，则该按钮现在将变为绿色（就像第一次单击时应该具有的那样）。然后它会在第三次点击时变红，似乎总是比传递给它的状态晚一步。

解决方案

要解决此问题，请取消主要元素的样式（请原谅术语，有人编辑），在我的例子中，是 TouchableOpacity 元素。添加一个子 View 元素并将样式与三元运算符和 wallah 一起放置在该 View 元素上。

如果您愿意，似乎对有效主元素或容器的状态有任何更改，仅在另一次渲染后生效，而不是包含在 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>
     );
  }
}