React Native - 在 Press 上更改其他组件样式

Question

例如，当按 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>

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

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

好的，现在让我们添加一个状态，该状态将控制选择的项。就我而言，我将其称为"selected"，他的值将为 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>);
  }
}

这就是你所需要的。