React Native - 更改其他组件样式 onPress答案

【问题标题】：React Native - change others components style onPressReact Native - 更改其他组件样式 onPress
【发布时间】：2018-03-18 04:04:13
【问题描述】：

比如onPress 2时，其他1,3,4样式会变成noselected，2变成selected。

<TopNav>
  <NavItem onPress={()=> this.ChooseThis()} style={styles.selected}>1</NavItem>
  <NavItem onPress={()=> this.ChooseThis()} style={styles.noselected}>2</NavItem>
  <NavItem onPress={()=> this.ChooseThis()} style={styles.noselected}>3</NavItem>
  <NavItem onPress={()=> this.ChooseThis()} style={styles.noselected}>4</NavItem>
</TopNav>

【问题讨论】：

请让您的问题更清楚。我假设您正在寻求有关如何实施该行为而不是如何解决问题的帮助。在这里提问之前你有没有尝试过？
@arracso 我在洞天做这种研究，找不到任何类似的结果
一个快速的选项是使用状态来保存当前被选中的项目。因此，不要将任何内容传递给ChooseThis()。将项目的名称或整数传递给他。并在样式上将状态与该名称进行比较。
如果你能得到答案，我会在稍后发布一个完整的解释

标签： javascript android ios react-native

【解决方案1】：

有几种方法可以实现这一目标。其中之一是使用父组件的状态。我不知道你的代码结构是什么，但让我们假设它是这样的：

class Nav extends React.Component {
  constructor(props) {
    super(props);
  }

  ChooseThis = () => { /* Some code*/ };

  render(){
    return (<TopNav>
      <NavItem onPress={()=> this.ChooseThis()} style={styles.selected}>1</NavItem>
      <NavItem onPress={()=> this.ChooseThis()} style={styles.noselected}>2</NavItem>
      <NavItem onPress={()=> this.ChooseThis()} style={styles.noselected}>3</NavItem>
      <NavItem onPress={()=> this.ChooseThis()} style={styles.noselected}>4</NavItem>
    </TopNav>);
  }
}

如果您使用的是无状态组件（不是创建类），您可能想像我一样重写您的代码。

好的，现在让我们添加一个状态来控制选择的项目。就我而言，我将其称为“已选择”，他的值为 1（如果需要，可以是字符串或其他内容）。

  constructor(props) {
    super(props);
    this.state = { selected: 1 };
  }

现在我将使用函数ChooseThis() 来改变状态。为此，我会将所选项目名称/索引/参考传递给他。

  ChooseThis = (index) => {
    this.setState({ selected: index });
    /* Some other code*/
  };

最后，我将在每个项目上设置它的索引/名称/引用，并检查它们的样式是否是当前选定的项目。

  render(){
    const selected = this.state.selected;
    return (<TopNav>
      <NavItem onPress={()=> this.ChooseThis(1)} style={selected == 1 ? styles.selected : styles.noselected}>1</NavItem>
      <NavItem onPress={()=> this.ChooseThis(2)} style={selected == 2 ? styles.selected : styles.noselected}>2</NavItem>
      <NavItem onPress={()=> this.ChooseThis(3)} style={selected == 3 ? styles.selected : styles.noselected}>3</NavItem>
      <NavItem onPress={()=> this.ChooseThis(4)} style={selected == 4 ? styles.selected : styles.noselected}>4</NavItem>
    </TopNav>);
  }
}

这就是你所需要的。

【讨论】：

我把{selected == 4 ? styles.selected : styles.noselected}改成{this.state.selected == 4 ? styles.selected : styles.noselected}错误消失了，但是什么也没发生，点2，2还是没有选中