1

以下是学习在 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> }

4

2 回答 2

1

而不是调用elem.setStateor elem.state，它应该是this.setStateand 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)

此外，是否有一种简单的方法可以影响子元素的样式，例如 web

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

于 2020-02-26T13:02:34.663 回答
0

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

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

原因：

使用 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>
     );
  }
}
于 2020-02-26T17:05:23.167 回答