Javascript 在react native中将应用程序导航结构从版本4更改为5

我正在使用react navigation版本4开发一个旧应用程序。该应用程序包含一个注册和登录页面，然后是应用程序的内容

最近，我开始使用react navigation version 5重新制作应用程序的内容，以便使用共享元素动画和底部选项卡导航器，这相当简单

但我很难将登录部分转换为版本5，因为应用程序结构有点复杂，而且我对版本5有点陌生

我将在下面留下一个应用程序结构图，以及使用的代码示例

App.js：

import { setNavigator } from "./app/navigationRef";
const articleListFlow = createStackNavigator({
  Main: MainScreen, // screen with diffrent articles categories
  ResultsShow: ResultShowScreen, // article details screen
});
const loginFlow = createStackNavigator({
  Signup: SignupScreen,
  Signin: SigninScreen,
});
loginFlow.navigationOptions = () => {
  return {
    headerShown: false,
  };
};

articleListFlow.navigationOptions = {
  title: "News Feed",
  tabBarIcon: ({ tintColor }) => (
    <View>
      <Icon style={[{ color: tintColor }]} size={25} name={"ios-cart"} />
    </View>
  ),
  activeColor: "#ffffff",
  inactiveColor: "#ebaabd",
  barStyle: { backgroundColor: "#d13560" },
};
const switchNavigator = createSwitchNavigator({
  ResolveAuth: ResolveAuthScreen,
  MainloginFlow: createSwitchNavigator({
    //WelcomeScreen: WeclomeScreen,
    loginFlow: loginFlow,
  }),

  mainFlow: createMaterialBottomTabNavigator(
    {
      articleListFlow: articleListFlow,
      ArticleSave: ArticleSaveScreen, // we dont need this one
      Account: AccountScreen,
    },
    {
      activeColor: "#ffffff",
      inactiveColor: "#bda1f7",
      barStyle: { backgroundColor: "#6948f4" },
    }
  ),
});
const App = createAppContainer(switchNavigator);
export default () => {
  return (
    <AuthProvider>
      <App
        ref={(navigator) => {
          setNavigator(navigator);
        }}
      />
    </AuthProvider>
  );
};

AuthContext.js

import { AsyncStorage } from "react-native";
import createDataContext from "./createDataContext";
import userAPI from "../api/user";

// using navigate to access the navigator and redirect the user
import { navigate } from "../navigationRef";

// AUTHENTICATION REDUCERS
const authReducer = (state, action) => {
  switch (action.type) {
    case "add_error": {
      return {
        ...state,
        errorMessage: action.payload,
      };
    }

    case "clear_error_message": {
      return {
        ...state,
        errorMessage: "",
      };
    }
    case "signin": {
      return {
        errorMessage: "",
        token: action.payload,
      };
    }

    default:
      return state;
  }
};

// CLEARING ERROR MESSAGES WHEN SWITCHING SIGNIN-SIGNUP
const clearErrorMessage = (dispatch) => () => {
  dispatch({ type: "clear_error_message" });
};

// AUTOMATIC SIGNIN ONLY USING TOKENS ON USER DEVICE
const tryLocalSignin = (dispatch) => async () => {
  const token = await AsyncStorage.getItem("token");
  if (token) {
    // if token exists
    dispatch({ type: "signin", payload: token });

    navigate("Main");
  } else {
    // if token doesnt exist
    navigate("WelcomeScreen");
  }
};

// SIGNUP
const signup = (dispatch) => async ({ email, password }) => {
  try {
    const response = await userAPI.post("/signup", { email, password });
    await AsyncStorage.setItem("token", response.data.token);
    dispatch({ type: "signin", payload: response.data.token });

    // making use of the navigate component to access navigation
    // and redirect the user
    navigate("Main");
  } catch (err) {
    dispatch({
      type: "add_error",
      payload: "Something went wrong with sign up",
    });
  }
};

// SIGNIN
const signin = (dispatch) => async ({ email, password }) => {
  try {
    const response = await userAPI.post("/signin", { email, password });
    await AsyncStorage.setItem("token", response.data.token);
    // using signin since the logic is the same
    dispatch({ type: "signin", payload: response.data.token });

    // making use of the navigate component to access navigation
    // and redirect the user
    navigate("Main");
  } catch (err) {
    console.log(err);
    dispatch({
      type: "add_error",
      payload: "Something went wrong with sign in",
    });
  }
};

// SIGNOUT
const signout = (dispatch) => async () => {
  // removing the token makes identification not work again
  await AsyncStorage.removeItem("token");
  dispatch({ type: "signout" });

  navigate("loginFlow");
};

// CREATING CONTEXT AND PROVIDER OBJECTS FOR AUTHENTICATION
export const { Provider, Context } = createDataContext(
  authReducer,
  {
    signin,
    signup,
    signout,
    clearErrorMessage,
    tryLocalSignin,
  },
  {
    token: null,
    errorMessage: "",
  }
);

createDataContext.js

import React, { useReducer } from "react";

export default (reducer, actions, defaultValue) => {
  const Context = React.createContext();

  const Provider = ({ children }) => {
    const [state, dispatch] = useReducer(reducer, defaultValue);

    const boundActions = {};

    for (let action in actions) {
      // for every action in the actions, call it with dispatch
      boundActions[action] = actions[action](dispatch);
    }

    return (
      <Context.Provider value={{ state, ...boundActions }}>
        {children}
      </Context.Provider>
    );
  };

  return { Context, Provider };
};

import React，{useReducer}来自“React”；
导出默认值（减速器、动作、默认值）=>{
const Context=React.createContext（）；
常量提供程序=（{children}）=>{
const[state，dispatch]=useReducer（reducer，defaultValue）；
const boundActions={}；
for（让行动中的行动）{
//对于操作中的每个操作，使用dispatch调用它
boundActions[动作]=动作[动作]（调度）；
}
返回(
{儿童}
);
};
返回{Context，Provider}；
};

---

我对冗长的代码深表敬意，并提前感谢您的帮助。

根据您的图表，我已尝试创建导航

const WelcomeStack = createStackNavigator();
const Tab = createBottomTabNavigator();
const ArticleStack = createStackNavigator();
const MainStack = createStackNavigator();

function Welcome(){
return(
    <WelcomeStack.Navigator>
        <WelcomeStack.screen name='SignIn' component={SignIn}/>
        <WelcomeStack.screen name='SignUp' component={SignUp}/>
    </WelcomeStack.Navigator>
)
}

function  Article(){
return(
    <ArticleStack.Navigator>
        <ArticleStack.Screen name='ArtcileList' name={ArticleList}/>
        <ArticleStack.Screen name='ArticleDetail' name={ArtcileDetail}/>
    </ArticleStack.Navigator>
)
}
function TabNav(){
<Tab.Navigator>
    <Tab.Screen name='Article' component={Article}/>
    <Tab.Screen name='Search' component={Search}/>
    <Tab.Screen name='Save' component={Save}/>
    <Tab.Screen name='Account' component={Account}/>
</Tab.Navigator>
}

function App(){
return(
<NavigationContainer>
<MainStack.Navigator>
   {this.state.isLogin ? 
   <MainStack.Screen name='Tab' component={TabNav}/> 
   :
   <MainStack.Screen name = 'WelcomeStack' component={Welcome}/>
  }
 </MainStack.Navigator>
 </NavigationContainer>
 )
 }

const WelcomeStack=createStackNavigator（）；
const Tab=createBottomTabNavigator（）；
const ArticleStack=createStackNavigator（）；
const-MainStack=createStackNavigator（）；
函数欢迎（）{
返回(
)
}
函数条（）{
返回(
)
}
函数TabNav（）{
}
函数App（）{
返回(
{this.state.isLogin？
:
}
)
}

在react navigation 5中，它们是无开关导航器，因此您必须使用堆栈导航+三值运算符。

---

根据您的图表，这只是一个想法。经过一些研究和开发，您可以把它做得更好。

根据您的图表，我已经尝试创建了导航

const WelcomeStack = createStackNavigator();
const Tab = createBottomTabNavigator();
const ArticleStack = createStackNavigator();
const MainStack = createStackNavigator();

function Welcome(){
return(
    <WelcomeStack.Navigator>
        <WelcomeStack.screen name='SignIn' component={SignIn}/>
        <WelcomeStack.screen name='SignUp' component={SignUp}/>
    </WelcomeStack.Navigator>
)
}

function  Article(){
return(
    <ArticleStack.Navigator>
        <ArticleStack.Screen name='ArtcileList' name={ArticleList}/>
        <ArticleStack.Screen name='ArticleDetail' name={ArtcileDetail}/>
    </ArticleStack.Navigator>
)
}
function TabNav(){
<Tab.Navigator>
    <Tab.Screen name='Article' component={Article}/>
    <Tab.Screen name='Search' component={Search}/>
    <Tab.Screen name='Save' component={Save}/>
    <Tab.Screen name='Account' component={Account}/>
</Tab.Navigator>
}

function App(){
return(
<NavigationContainer>
<MainStack.Navigator>
   {this.state.isLogin ? 
   <MainStack.Screen name='Tab' component={TabNav}/> 
   :
   <MainStack.Screen name = 'WelcomeStack' component={Welcome}/>
  }
 </MainStack.Navigator>
 </NavigationContainer>
 )
 }

const WelcomeStack=createStackNavigator（）；
const Tab=createBottomTabNavigator（）；
const ArticleStack=createStackNavigator（）；
const-MainStack=createStackNavigator（）；
函数欢迎（）{
返回(
)
}
函数条（）{
返回(
)
}
函数TabNav（）{
}
函数App（）{
返回(
{this.state.isLogin？
:
}
)
}

在react navigation 5中，它们是无开关导航器，因此您必须使用堆栈导航+三值运算符。

---

根据您的图表，这只是一个想法。在一些R&D之后，你可以使它更好。

< P>当从V4移动到V5时，有一些事情需要考虑。它涉及到一些变化，也可以考虑使用钩子之类的特性。

第一个更改是删除开关导航器，并有条件地将导航器呈现在原来的位置。这将在你的App.js中完成。因为您已经有了一个基于reducer的实现，所以可以使用state值来做出这个决定

下一个变化将是堆栈的创建，在V4中，您通过传递屏幕来创建导航，现在一切都是一个组件，您作为子对象传递屏幕

该选项还作为道具发送到导航器或屏幕本身

的使用仍然是可能的，但是您也可以在组件内部使用像usenavigation这样的钩子，对于身份验证流，您不会在有条件地呈现导航器时使用它

我根据你的代码制作了一个简化版本。 App.js

认证减速器

export const authReducer = (state, action) => {
  switch (action.type) {
    case 'RESTORE_TOKEN':
      return {
        ...state,
        token: action.token,
        isLoading: false,
      };

    case 'SIGN_IN': {
      return {
        errorMessage: '',
        token: action.payload,
      };
    }

    case 'SIGN_OUT': {
      return {
        errorMessage: '',
        token: null,
      };
    }

    default:
      return state;
  }
};

如您所见，流程将显示欢迎屏幕，直到令牌从异步存储加载，然后基于此显示选项卡或登录屏幕。参数也作为道具传递。我已经将动作移动到app.js，但它也可以分开

您可以在这里看到一个完全运行的示例

---

希望这有帮助，可以问是否有任何问题。

在从V4移动到V5时需要考虑的一些事情，它涉及到一些变化，也可以考虑使用钩子之类的特性。 第一个更改是删除开关导航器，并有条件地将导航器呈现在原来的位置。这将在你的App.js中完成。因为您已经有了一个基于reducer的实现，所以可以使用state值来做出这个决定

下一个变化将是堆栈的创建，在V4中，您通过传递屏幕来创建导航，现在一切都是一个组件，您作为子对象传递屏幕

该选项还作为道具发送到导航器或屏幕本身

的使用仍然是可能的，但是您也可以在组件内部使用像usenavigation这样的钩子，对于身份验证流，您不会在有条件地呈现导航器时使用它

我根据你的代码制作了一个简化版本。 App.js

认证减速器

export const authReducer = (state, action) => {
  switch (action.type) {
    case 'RESTORE_TOKEN':
      return {
        ...state,
        token: action.token,
        isLoading: false,
      };

    case 'SIGN_IN': {
      return {
        errorMessage: '',
        token: action.payload,
      };
    }

    case 'SIGN_OUT': {
      return {
        errorMessage: '',
        token: null,
      };
    }

    default:
      return state;
  }
};

如您所见，流程将显示欢迎屏幕，直到令牌从异步存储加载，然后基于此显示选项卡或登录屏幕。参数也作为道具传递。我已经将动作移动到app.js，但它也可以分开

您可以在这里看到一个完全运行的示例

---

希望这能有所帮助，如果有任何问题，请随时提问。

hello@Guruparan Giritharan很抱歉反应太晚，但我刚刚发现了一个问题，知道身份验证过程不起作用的原因吗？我可以使用所有电子邮件登录，即使它们与我后端的邮件不匹配，我将tokken更改为我在后端服务器上使用的tokken仍然没有任何功能…您好@Max我可以知道您是如何执行身份验证的吗？您能检查传递给服务调用的值吗？谢谢您的回复，我有一个后端节点js服务器连接到mongodb数据

export const authReducer = (state, action) => {
  switch (action.type) {
    case 'RESTORE_TOKEN':
      return {
        ...state,
        token: action.token,
        isLoading: false,
      };

    case 'SIGN_IN': {
      return {
        errorMessage: '',
        token: action.payload,
      };
    }

    case 'SIGN_OUT': {
      return {
        errorMessage: '',
        token: null,
      };
    }

    default:
      return state;
  }
};