Question

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

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

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

好了，现在让我们添加一个状态来控制选择哪个Item。在我的情况下，我会称之为＆＃34;选择＆＃34;并且他的值将为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>);
  }
}

这就是你所需要的一切。

React Native - 更改onPress上的其他组件样式

1 个答案: