【问题标题】:React native keycloak unable to navigate to app screen after keycloak authenication在keycloak身份验证后反应本机keycloak无法导航到应用程序屏幕
【发布时间】:2022-11-10 05:45:56
【问题描述】:

我在我的应用程序中使用“@react-keycloak/native”:“^0.6.4”。我已经成功登录了。但是即使在使用redirectUri 之后,我也无法在成功登录后导航到我的本机应用程序屏幕。这是 App.js 代码。

应用程序.js

export default () => {
const onKeycloakTokens = useCallback((tokens) => {
if(!tokens.token) {
  // remove from storage
} else {
  console.log("ReactNativeKeycloakProvider onKeycloakTokens:",tokens.token);
  //save to storage tokens.token
}
});
return (
<MenuProvider>
  <Provider store={store}>
  <ReactNativeKeycloakProvider 
    authClient={keycloak}
    initOptions={{redirectUri:"com.example.name://SampleBlank",
      
    // ---------- OTHER METHODS TRIED ----------
    // redirectUri:"name://SampleBlank",
    // redirectUri:"./src/screens/SampleBlank",
    // redirectUri:"example.name://SampleBlank",
    }}
    // LoadingComponent = {LoginScreen}
    //events : onReady, onInitError, onAuthSuccess, onAuthError, onAuthRefreshSuccess,onAuthRefreshError,onTokenExpired,onAuthLogout
    onEvent= {(event,error) => {
      console.log("Keycloak event :",event,error);
    }}
    isLoadingCheck={(keycloak) => {
      console.log("Authenticated",keycloak.authenticated)
      return !keycloak.authenticated
    }}
    onTokens={onKeycloakTokens}

  >  
    <App/>
    </ReactNativeKeycloakProvider>
    <CustomAlert />
    <ModalPortal />
   
  </Provider>
  </MenuProvider>
);
};

 const App =  (props) => {
return (
    <NavigationContainer
      ref={navigationRef}
    >
      <Stack.Navigator initialRouteName="SplashScreen"
      >
        <Stack.Screen
          name="SplashScreen"
          component={SplashScreen}
          options={{headerShown: false}}
        />
        <Stack.Screen 
         name = "SampleBlank"
         component= {SampleBlank}
         options = {{headerShown: false}}
        />
        <Stack.Screen
          name="Dashboard"
          component={Dashboard}
          options={(props) => ({
            headerStyle: {
              elevation: 0,
              shadowOpacity: 0,
              borderBottomWidth: 0,
              backgroundColor: '#F3F6FF', //Set Header color
            },
            headerLeft: null,
            // opacity: 0,
            //Set Header text color
            headerTitle: '',
          })}
        />
      </Stack.Navigator>
    </NavigationContainer>
   );};

const Dashboard =  props => {
 var  initRoute = JSON.stringify(props.route.params.screen);
 return (
<Bottom.Navigator
  initialRouteName={initRoute}
  >
  <Bottom.Screen
    name="DashboardScreenStack"
    component={DashboardScreenStack}
  />
 
  <Bottom.Screen
    name="Others"
    component={Others}
  />
 
</Bottom.Navigator>
);};

const DashboardScreenStack = props => {
return (
<Stack.Navigator initialRouteName={DashboardScreen}>
  <Stack.Screen
    name="DashboardScreen"
    component={DashboardScreen}
    options={{headerShown: false}}
  />
</Stack.Navigator>
);};

 const Others = props => {
return (
<Stack.Navigator initialRouteName={Test}>
   <Stack.Screen
    name="Test"
    component={Test}
    options={{headerShown: false}}
  />
</Stack.Navigator>
);};

我尝试了不同的方法来添加 ReactNativeKeycloakProvider "redirectUri" 。但都没有奏效。 我尝试了那些参考 react-native-keycloak 示例中给出的 redirectUri 为 redirectUri:"myapp://HomeScreen"。 我想在成功登录时加载 SampleBlank 或 Dashboard。 任何帮助,将不胜感激。

【问题讨论】:

    标签: react-native keycloak


    【解决方案1】:

    同样的错误在这里...我想导航到主页,登录成功后

    【讨论】:

      猜你喜欢
      • 2019-01-14
      • 1970-01-01
      • 2020-09-20
      • 2020-01-30
      • 2021-08-30
      • 2022-10-13
      • 2021-06-20
      • 1970-01-01
      • 2019-01-13
      相关资源
      最近更新 更多