Press 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。目前，我看不到父样式通过选择器影响子元素的方法，就像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还不存在该功能。您应该做的是将道具传递给子组件。

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>
);
}
}