React native + react-native-router-flux + AsyncStorage：我如何在不同路由器中的场景之间移动

Question

在使用react-native-router-flux和AsyncStorage的React Native中，我有几个场景分布在几个路由器上，当会话到期时我需要从任何场景移动到auth场景（出于多种原因，令牌过期，注销等。）

这是我的主路由器1

export default class RouterComponent extends Component<{}> {

  constructor() {
    super();
    this.state = {hasToken: false, isLoaded: false};
  }

  componentDidMount() {
    AsyncStorage.getItem('authtoken').then((token) => {
      console.log(token);
      this.setState({hasToken: token !== null, isLoaded: true})
    });
  }


  render() {
    if (!this.state.isLoaded) {
      return (
        <ActivityIndicator/>
      )
    } else {
      return (
        <Router cerrarSesion={this.cerrarSesion}>
        <Scene key="root">
          <Scene key="auth">
            <Scene key="login" component={Login} hideNavBar initial={!this.state.hasToken}/>
            <Scene key="recuperarPass" component={RecuperarPass} hideNavBar/>
            <Scene key="seleccionarSucursal" component={SeleccionarSucursal} hideNavBar/>
          </Scene>

          <Scene key="main" initial={this.state.hasToken}>
            <Scene key="appContainer" component={AppContainer} hideNavBar/>
          </Scene>

          <Scene key="activador">
            <Scene key="activadorRegistrar" component={RegistrarUsuario} hideNavBar/>
          </Scene>
        </Scene>
        </Router>
      );
    }
  }
}

这是我的appContainer组件2

export default class AppContainer extends Component<{}> {
  constructor(props) {
    super(props);

    this.state = {
      data: this.props.data,
      authtoken: this.props.authtoken,
      sucursal: this.props.sucursal
    };
  }


  componentWillMount() {
    this.getDataFromStorage();
  }

  async getDataFromStorage() {
    try {
      let value = await AsyncStorage.getItem('authtoken');
      if (value !== null) {
        this.setState({authtoken: value});
        AsyncStorage.getItem('authtoken').then((data) => {
          this.setState({data});
          console.log('data en asyncstorage:' + this.state.data);
          console.log('authtoken en asyncstorage:' + this.state.authtoken);
        });
      }
    } catch (error) {
      // Error retrieving data
    }
  }

  componentDidMount() {
    console.log(this.state.data);
    console.log(this.state.authtoken);

  }

  render(props) {
    console.log(this.props.sucursal);
    return (
      <View style={styles.bigContainer}>
      <Header/>
      <MainContainer data={this.state.data} authtoken={this.state.authtoken} sucursal={this.state.sucursal}/>
      </View>
    );
  }
}

这是我的mainContainer，我的主路由器3

中的另一个路由器

export default class MainContainer extends Component<{}> {
  constructor(props) {
    super(props);
    this.state = {
      datalogin: this.props.data,
      authtoken: this.props.authtoken,
      sucursal: this.props.sucursal
    };
  }



  async cerrarSesion(mensaje) {
    try {
      await AsyncStorage.removeItem('id_token');
      Alert.alert(mensaje);
      Actions.auth()
    } catch (error) {
      console.log('AsyncStorage error: ' + error.message);
    }
  }

  render() {
    return (
      <Router {...this.state} cerrarSesion={this.cerrarSesion}  hideNavBar>
        <Scene key="buscarUsuario" component={BuscarUsuario} initial/>
        <Scene key="resultadoBusqueda" component={ResultadoBusqueda}/>
        <Scene key="historialTransacciones" component={HistorialTransacciones}/>
        <Scene key="registrarUsuario" component={RegistrarUsuario}/>
        <Scene key="redimirRegalos" component={RedimimirRegalos}/>
        <Scene key="cambiarPass" component={CambiarPass}/>
        <Scene key="informacion" component={Informacion}/>
        <Scene key="sideBar" component={Sidebar}/>
        <Scene key="premiosComercio" component={ListaPremiosComercio}/>
        <Scene key="vincular" component={VincularUsuario}/>
        <Scene key="router" component={MyRouter}/>
      </Router>
    );
  }
}

这是我的侧边栏组件，它位于mainContainer内，我在这里关闭会话4

render () {
  return (
    <View style={styles.container}>
      <View style={styles.sideBarHeader}>
        <Image style={styles.image} source={require('../../images/prueba.png')}/>
        <Text style={styles.titleText} >Nombre Completo</Text>
      </View>
      <View style={styles.sideBarBody}>
        <View style={styles.buttonContainer}>
          <Button
            type="flatSidebar"
            onPress={() => this.onClick('buscar_usuario')}>Buscar usuario</Button>
        </View>
        <View style={styles.buttonContainer}>
          <Button
            type="flatSidebar"
            onPress={() => this.onClick('agregar_usuario')}>Agregar nuevo usuario</Button>
        </View>
        <View style={styles.buttonContainer}>
          <Button
            type="flatSidebar"
            onPress={() => this.onClick('informacion')}>Información</Button>
        </View>
        <View style={styles.buttonContainer}>
          <Button
            type="flatSidebar"
            onPress={() => this.onClick('cambiar_pass')}>Cambiar Contraseña</Button>
        </View>
        <View style={styles.buttonContainer}>
          <Button
            type="flatSidebar"
            onPress={() => this.props.cerrarSesion('Sesion cerrada Correctamente')}>Cerrar Sesión</Button>
        </View>
      </View>
    </View>
  );
}

这是我评估令牌是否已过期的众多组件之一，所有这些组件都位于mainContainer 5

async requestUsuarios (formdata) {
  try {
    const response = await fetch('https://*************************', {
      method: 'POST',
      headers: {
        '**************': ****************,
      },
      body: formdata
    });
    const responseJson = await response.json();
    return responseJson;
  }
  catch (error) {
    console.log(error);
    this.props.cerrarSesion('Error en el servidor, inicie sesion nuevamente');
  }
}

我希望每次条件都满足时（注销按钮，令牌已过期等）我可以调用从app容器传递的方法并重定向到登录，但以下消息总是出现6 < / p>

  

[react-native-router-flux]错过了key = auth的路由数据