7

嘿，我正在尝试在使用 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

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

4

3 回答 3

5

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

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
于 2016-07-27T18:42:05.253 回答
4

你react-native-router-flux v4可以使用Actions.currentScene

于 2018-11-11T07:35:06.593 回答
1

用于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;
    }
  }
于 2018-05-16T08:35:25.957 回答