React native 从另一个tabnavigator响应本机导航更改状态

我正在使用react navigation/TabNavigator，有没有一种方法可以在不使用Redux或mobx的情况下从另一个选项卡更改选项卡的状态？

是的，您可以。这是一个有点复杂，有点黑客，可能有一些副作用，但在理论上你可以做到。我创造了一个新的世界

在react navigation（反应导航）中，您可以使用route（路线）键查看其他屏幕

当调度SetParams时，路由器将产生一个新的状态 已更改密钥标识的特定路由的参数

• 参数-对象-必需-要合并到现有路由参数中的新参数
• 键-字符串-必需-路由键，该键应获取新参数

示例

import { NavigationActions } from 'react-navigation'

const setParamsAction = NavigationActions.setParams({
  params: { title: 'Hello' },
  key: 'screen-123',
})
this.props.navigation.dispatch(setParamsAction)

class App extends Component {
  constructor(props) {
    super(props);
    this.state = {
      keys: []
    };
  }
  onNavigationChange = (prevState, currentState) => {
    this.setState({
      keys: currentState.routes
    });
  }
  render() {
    return(
      <Navigation
        onNavigationStateChange={this.onNavigationChange}
        screenProps={{keys: this.state.keys}}
      />
    );
  }
}

要使其工作，您需要知道要传递参数的屏幕的

键

道具。这就是我们弄得一团糟的地方。我们可以组合和道具来获取当前堆栈的关键点，然后将它们作为属性传递到我们当前所在的屏幕

重要提示：因为当应用程序首次启动时，

onNavigationStateChange

不会触发此.state.keys将是一个空数组。因此，您需要执行初始导航操作

示例

import { NavigationActions } from 'react-navigation'

const setParamsAction = NavigationActions.setParams({
  params: { title: 'Hello' },
  key: 'screen-123',
})
this.props.navigation.dispatch(setParamsAction)

class App extends Component {
  constructor(props) {
    super(props);
    this.state = {
      keys: []
    };
  }
  onNavigationChange = (prevState, currentState) => {
    this.setState({
      keys: currentState.routes
    });
  }
  render() {
    return(
      <Navigation
        onNavigationStateChange={this.onNavigationChange}
        screenProps={{keys: this.state.keys}}
      />
    );
  }
}

现在您可以从导航中获取新参数，您可以在屏幕中使用它，也可以在中更新您的状态

更新 现在react导航支持监听器，您可以使用它来检测屏幕的焦点或模糊状态

-订阅导航生命周期的更新

React Navigation向订阅的屏幕组件发出事件 他们：

• 将模糊

  -屏幕将不聚焦

• 将聚焦

  -屏幕将聚焦

• didFocus

  -屏幕聚焦（如果有转换，转换完成）

• didBlur

  -屏幕未聚焦（如果有转换，转换完成）

文档中的示例

---

如果我了解你想要的是什么，我会如何刷新以前的导航屏幕。在我的示例中，我刷新了从相机拍摄的图像：

屏幕A

  onPressCamera() {
    const { navigate } = this.props.navigation;

    navigate('CameraScreen', {
      refreshImages: function (data) {
        this.setState({images: this.state.images.concat(data)});
      }.bind(this),
    });
}

屏幕B

  takePicture() {
   const {params = {}} = this.props.navigation.state;

   this.camera.capture()
     .then((data) => {
       params.refreshImages([data]);
     })
     .catch(err => console.error(err));
  }

---

我想不是。您需要在选项卡中重新渲染组件，如果没有一些操作接收器（如Redux或MobX中的

componentWillReceiveProps

），则无法强制渲染组件。当选项卡导航需要重新渲染时，我很长一段时间都遇到了这个问题。如果我将选项卡放在某些父组件中，是否也存在此问题？我尝试了此操作，但当我切换超过4次时，我收到以下错误消息：“超过了最大调用堆栈大小”@rayashi我的示例中可能存在一些错误。我只是想让你知道你能做什么。具体实施取决于您。

  takePicture() {
   const {params = {}} = this.props.navigation.state;

   this.camera.capture()
     .then((data) => {
       params.refreshImages([data]);
     })
     .catch(err => console.error(err));
  }