React Native跨Navigator跳转Screen组件的问题求助

问题根源 #

当前你的导航结构是互斥渲染的：当用户未完成问卷时，NavigationContainer只渲染AuthNavigator；完成后才渲染AppNavigator。所以在QuestionScreen（属于AuthNavigator）中调用navigation.navigate("Feed")时，AppNavigator并未被加载，自然找不到Feed路由，导致报错。

解决步骤 #

1. 更新AuthContext，添加状态更新方法 #

修改AuthContext的定义，把setAnswersCompleted加入上下文，让QuestionScreen能修改这个状态：

// auth/context.js
import { createContext } from 'react';

const AuthContext = createContext({
  userId: null,
  setUserId: () => {},
  setAnswersCompleted: () => {}, // 新增
});

export default AuthContext;

然后在App.js的AuthContext.Provider中传入这个方法：

// App.js
return (
  <AuthContext.Provider 
    value={{ userId, setUserId, setAnswersCompleted }} // 加入setAnswersCompleted
    onLayout={onLayoutRootView}
  >
    <NavigationContainer ref={navigationRef} independent={true} theme={navigationTheme}>
      {userId && answersCompleted ? <AppNavigator /> : <AuthNavigator /> }
    </NavigationContainer>
  </AuthContext.Provider>
)

2. 修改QuestionScreen的跳转逻辑 #

在QuestionScreen中，不再直接调用navigation.navigate("Feed")，而是通过上下文更新answersCompleted状态，触发App切换到AppNavigator：

// QuestionScreen.js
const QuestionScreen = ({ navigation }) => {
  const saveAnswerApi = useApi(answersApi.save)
  const [currentIdxQuestion, setCurrentIdxQuestion] = useState(0)
  const [answer, setAnswer] = useState([])
  const [error, setError] = useState();
  const [answersSent, setAnswersSent] = useState(false)
  const auth = useAuth() // 这里会拿到setAnswersCompleted

  const QuestionScreenContent = ({ idx }) => {

    const sendAnswers = async () => {
      const result = await saveAnswerApi.request(auth.userId, answer)
      
      if (!result.ok) {
        if (result.data) {
          setError(result.data.error)
        } else {
          setError("An unexpected error occurred")
          console.log(result)
        }
        return
      }

      // 替换原来的navigation.navigate，更新状态切换导航器
      auth.setAnswersCompleted(true)
    }

    // ... 其余代码不变
  }

  // ... 其余代码不变
}

3. 设置AppNavigator的初始路由 #

确保AppNavigator渲染时默认显示Feed页面，在Tab.Navigator中添加initialRouteName：

// AppNavigator.js
const AppNavigator = () => {
  return (
    <Tab.Navigator initialRouteName="Feed"> {/* 新增初始路由设置 */}
      {/* ... 其余Tab.Screen代码不变 */}
    </Tab.Navigator>
  )}

为什么之前的方法无效？ #

• 嵌套导航：将AuthNavigator嵌套进AppNavigator会导致底部TabBar始终显示，不符合未完成问卷时的界面逻辑，因此会出现多余按钮。
• 传递路由：传递的是AuthNavigator的路由对象，而Feed属于未渲染的AppNavigator，无法识别该路由。
• RefNavigation：导航Ref只能访问当前渲染的导航器（即AuthNavigator），同样找不到未加载的Feed路由。

内容的提问来源于stack exchange，提问作者codebear22