react-native-router-flux，如何获取当前场景键答案

【问题标题】：react-native-router-flux, how to get current scene keyreact-native-router-flux，如何获取当前场景键
【发布时间】：2016-07-26 14:32:42
【问题描述】：

嘿，我正在尝试在使用 react-native-router-flux 时获取当前场景键。

我的路线文件：

const AppRouter = connect()(Router)

class Routes extends Component {
  render() {
    function selector(props) {
      console.log(props)
      // GoogleAnalytics.trackView(props.navigationState)
      return props.auth.isLoggedIn ? (props.auth.isVerified? 'home': 'authenticate') : 'authenticate'
    }

    const component = connect(state => ({
      auth: state.auth,
    }))(Switch)

    return (
      <AppRouter>
        <Scene key="root" component={component} tabs selector={selector} hideNavBar hideTabBar>
          <Scene key="authenticate" hideTabBar>
            <Scene type="replace" key="login" title="Login" initial component={GradientBackground(LoginScreen)} hideNavBar/>
            <Scene type="replace" key="register" component={GradientBackground(RegisterScreen)} hideNavBar/>
            <Scene type="replace" key="forgotPassword" title="forgotPassword" component={GradientBackground(ForgotPasswordScreen)} hideNavBar/>
            <Scene type="replace" key="emailConfirmation" component={GradientBackground(EmailConfirmationScreen)} hideNavBar/>
          </Scene>
          <Scene key="home" component={NavigationDrawer} type="replace">
            {require('./scenes/home')}
          </Scene>
        </Scene>
      </AppRouter>
    )
  }
}

export default Routes

如您所见，我正在尝试将当前场景名称发送到谷歌分析进行跟踪，但我似乎无法获得当前显示的场景密钥，有什么想法吗？

【问题讨论】：

标签： routing react-native react-routing

【解决方案1】：

我最终实现了一个中间减速器：

const AppRouter = connect()(Router)

class Routes extends Component {

  render() {
    let catchInitialState = false

    function selector(props) {
      return props.auth.isLoggedIn ? (props.auth.isVerified? 'home': 'authenticate') : 'authenticate'
    }

    const reducerCreate = params => {
      const defaultReducer = Reducer(params)
      return (state, action) => {
        if(action.type == 'RootContainerInitialAction') {
          catchInitialState = true
        }

        if(catchInitialState && action.type != 'RootContainerInitialAction') {
          GoogleAnalytics.trackScreenView(action.scene.sceneKey)
          catchInitialState = false
        }

        if(action.type == 'REACT_NATIVE_ROUTER_FLUX_REPLACE') {
          GoogleAnalytics.trackScreenView(action.key)
        }

        return defaultReducer(state, action)
      }
    }

    const component = connect(state => ({
      auth: state.auth,
    }))(Switch)

    return (
      <AppRouter createReducer={reducerCreate}>
        <Scene key="root" component={component} tabs selector={selector} hideNavBar hideTabBar>
          <Scene key="authenticate" hideTabBar>
            <Scene type="replace" key="login" initial component={GradientBackground(LoginScreen)} hideNavBar/>
            <Scene type="replace" key="register" component={GradientBackground(RegisterScreen)} hideNavBar/>
            <Scene type="replace" key="forgotPassword" component={GradientBackground(ForgotPasswordScreen)} hideNavBar/>
            <Scene type="replace" key="emailConfirmation" component={GradientBackground(EmailConfirmationScreen)} hideNavBar/>
          </Scene>
          <Scene key="home" component={NavigationDrawer} type="replace">
            {require('./scenes/home')}
          </Scene>
        </Scene>
      </AppRouter>
    )
  }
}

export default Routes

【讨论】：

对于“const defaultReducer = Reducer(params)”，您在哪里导入您传递参数的“Reducer”函数？我不确定它的意义是什么：“return defaultReducer(state, action)”。
一旦自定义减速器完成工作（这有助于我跟踪谷歌分析的页面更改），我将状态和操作返回到默认减速器，这样路由器就可以神奇地改变应用程序中的视图，否则路由器停止工作。默认 reducer 是库的一部分： import { Scene, Switch, Router, Reducer } from 'react-native-router-flux'
这是基于的示例：github.com/aksonov/react-native-router-flux/blob/…
谢谢！这里我只需要将动作类型替换为 REACT_NATIVE_ROUTER_FLUX_FOCUS

【解决方案2】：

在react-native-router-flux v4 上，您可以使用Actions.currentScene

【讨论】：

对我来说，我必须使用Action.currentScene。这不是一个函数

【解决方案3】：

使用Action.currentScene 与路由名称进行比较

就我而言：

onBackPress(){
    if (Actions.currentScene == "Home") {
      Alert.alert(
          'Thoát ứng dụng',
          'Bạn có muốn thoát không?', [{
              text: 'Cancel',
              onPress: () => console.log('Cancel Pressed'),
              style: 'cancel'
          }, {
              text: 'OK',
              onPress: () => BackHandler.exitApp()
          }, ], {
              cancelable: false
          }
      )
      return true;
    }
  }

【讨论】：