Question

NavigatorIOS中有一个2层深的按钮，当触发时，应该更改TabBarIOS选择的TabBarIOS项目。

组件结构如下：
--FooterTabs
------ NavigatorIOS：列表 - ＆gt;列表项

我试图通过在FooterTabs中使用一个改变状态的函数来实现上述目的，并使用其选项＆＃39;选择的TabBar.Items。当州政府选择“不同的字符串”时，它就变为真实。

像这样：

_changeToAlarms(){
    console.log('Hello from Footer Tabs');
    this.setState({
      selectedTab: 'Alarms'
    });
  }

render(){
  return(
    <Icon.TabBarItemIOS title={'Alarms'}
              iconName='ios-clock'
              selected={this.state.selectedTab === 'Alarms'}
              onPress={()=> {
                this.setState({
                  selectedTab: 'Alarms'
                });
              }}>
              <ComingSoon/>
            </Icon.TabBarItemIOS>

<Icon.TabBarItemIOS title={'Schedules'}
                  iconName='ios-moon'
                  selected={this.state.selectedTab === 'Schedules'}
                  onPress={()=> {
                    this.setState({
                      selectedTab: 'Schedules'
                    });
                  }}>
                </Icon.TabBarItemIOS>
  );
}

* Icon.TabBatItem的行为与TabBarIOS.Item完全相同。

onPress有效，但是为了能够以类似的方式更改选项卡（通过修改组件的状态），我将_changeToAlarms（）作为道具传递给了SleepSchedules＆＃39;。

<Icon.TabBarItemIOS ...
                  >
                  <NavigatorIOS
                    initialRoute={{
                      component: SleepSchedules ,
                      title: ' ',
                      passProps: {changeToAlarms: ()=> this._changeToAlarms()}
                    }}
                    style={{flex: 1}}
                    />
                </Icon.TabBarItemIOS>

从 SleepSchedules 开始，我正在导航到下一个组件并传递之前的“changeToAlarms”＆＃39;作为道具。

_handlePress(selectedSchedule){
    this.setState({selectedSchedule});

    this._navScheduleItem(selectedSchedule)
  }

   _navScheduleItem(scheduleName){

     this.props.navigator.push({
         title: `${scheduleName} Sleep`,
         component: ScheduleItem,
         passProps: {scheduleName}, changeToAlarms: ()=> this.props.changeToAlarms
     })
   }

render(){
   return(
      ...
      onPress={()=> this._handlePress('Monophasic')}>
   );
}

在 ScheduleItem 中，我试图将道具称为“更改警报”。已通过，应该来自页脚标签。

_handleTouch(){
  console.log('Hello from Schedule Item');
  this.props.changeToAlarms;
}

render(){
   return(
      ...
      onPress={()=> this._handleTouch()}
   );
}

控制台记录来自ScheduleItem的问候＆＃39;每次我按下它，但没有记录来自FooterTabs＆＃39;它也没有改变标签。

是否有人发现错误？

我是初学者，非常感谢你的帮助！：）

Answer 1

在this.props.changeToAlarms之后你需要一个（）。 this.props.changeToAlarms（）

Answer 2

我认为可能有一个更好的方法，但没有看到更多的代码，很难全面了解最新情况。在我的_handlePress函数中，确实引起了我注意的事情。你调用了setState，然后调用了另一个函数。

根据ReactDocs：

无法保证对setState的调用同步操作并且可以批量调用以获得性能提升。

这可能会给你造成一个问题，再次没有更多的代码很难说。您可以尝试将overload method用于将函数作为第二个arg的setState。

setState（nextState，callback）   执行nextState到当前状态的浅合并。这是主要的＆gt;用于从事件处理程序和服务器请求触发UI更新的方法＆gt; ＆GT;回调。

第一个参数可以是一个对象（包含零个或多个键）   更新）或返回对象的函数（状态和道具）   包含要更新的密钥。

这可确保您的setstate在执行下一个函数之前完成。

_handlePress(selectedSchedule){
    this.setState({selectedSchedule}, () => 
    {
        this._navScheduleItem(selectedSchedule);
    });
  }

孙子组件没有改变祖父母的状态

2 个答案: