将反应导航从4.x升级到5.1后，初始组件屏幕将无法路由

Question

bounty到期在15小时内。该问题的答案有资格获得+ 100声望赏金。user938363正在寻找来自信誉良好的来源的答案。

react-navigation在我的React Native 0.61应用程序上从4.x升级到5.x。有很多更改可能会中断升级。我的问题是，升级后，即使单击了组件链接，初始屏幕仍然停留并且无法路由。

这里是package.json对react-navigation的依赖性的一部分：

"@react-navigation/bottom-tabs": "^5.2.2",
"@react-navigation/native": "^5.1.0",
"@react-navigation/stack": "^5.2.1",

[这里是我的App.js（对不起，这有点混乱。还要将3个标签减少到一个初始屏幕）。加载的第一个组件是SplashScrren，它从本地驱动器检索数据。之后，加载App。 App有一个底部选项卡Event。单击列表上的事件时，会加载Chat，允许用户与其他用户聊天。

import io from 'socket.io-client';
import GLOBAL from "./src/lib/global";
import SplashScreen from "./src/components/splashscreen/SplashScreen";
import globalContext from "./src/components/splashscreen/GlobalContext";
import { enableScreens } from 'react-native-screens';

enableScreens();

//import helper from "./src/lib/helper";

const instructions = Platform.select({
  ios: 'Press Cmd+R to reload,\n' + 'Cmd+D or shake for dev menu',
  android:
    'Double tap R on your keyboard to reload,\n' +
    'Shake or press menu button for dev menu',
});

//socket.io
const socket = io(GLOBAL.BASE_URL, {
    transports: ['websocket'],
    jsonp: false
  });
console.log("socket id in App.js : ", socket.id);

socket.on('disconnect', (reason) => {
  // ...
  if (reason === 'io server disconnect') {
    // the disconnection was initiated by the server, you need to reconnect manually
    socket.connect();
  }

});

const BTab = createBottomTabNavigator();
const Stack = createStackNavigator();

const EventStack = (data) => {
  console.log("data in eventStack : ", data);
  const EventWithSelf = (props) => (<Event {...props} myself={data.data.myself} grp_name={data.data.grp_name} token={data.data.result} group_id={data.data.group_id} alias={data.data.alias} grpmember_id={data.data.grpmember_id} role={data.data.role} device_id={data.data.device_id} />)
  const NewEventWithSelf = (props) => (<NewEvent {...props} myself={data.myself} token={data.result} role={data.role} group_id={data.group_id} grpmember_id={data.data.grpmember_id} device_id={data.data.device_id} />)
  const EditEventWithSelf = (props) => (<EditEvent {...props} myself={data.data.myself} token={data.data.result} device_id={data.data.device_id} role={data.data.role} />)
  const ChatWithSocket = (props) => (<Chat {...props} socket={socket} myself={data.data.myself} token={data.data.result} alias={data.data.alias} grpmember_id={data.data.grpmember_id} role={data.data.role} group_id={data.data.group_id} device_id={data.data.device_id}/>);
  return (
    <Stack.Navigator>
      <Stack.Screen 
        name="Event" 
        component={EventWithSelf} 
      />
      <Stack.Screen 
        name="New Event" 
        component={NewEventWithSelf} 
      />
      <Stack.Screen 
        name="Edit Event" 
        component={EditEventWithSelf} 
      />
      <Stack.Screen 
        name="Chat" 
        component={ChatWithSocket} 
      />
    </Stack.Navigator>
  );
};    

function AppScreen ({route, navigation}) {

  const authContext = React.createContext(null);
  const stateContext = React.createContext(null);
  const propsContext = React.createContext(null);
  console.log("route in AppScreen : ", route);
  const {data} = route.params;
  console.log("data in AppScreen : ", data);
  const [myself, setMyself] = useState(data.myself);
  const [result, setResult] = useState(data.result);
  const [group_id, setGroup_id] = useState(data.group_id);
  const [grpmember_id, setGrpmember_id] = useState(data.grpmember_id);
  const [role, setRole] = useState(data.role);
  const [alias, setAlias] = useState(data.alias);
  const [contact_id, setContact_id] = useState(data.contact_id);
  const [grp_name, setGrp_name] = useState(data.grp_name);
  const [device_id, setDevice_id] = useState(data.device_id);
  const [success, setSuccess] = useState(data.success);
  //
  const SignupWithDeviceId = (props) => (<Signup {...props} device_id={device_id} />);
  const Verif1WithDeviceId = (props) => (<Verif1 {...props} device_id={device_id} />);

  var data1 = {
    myself,
    result,
    group_id,
    grpmember_id,
    grp_name,
    role,
    alias,
    contact_id,
    device_id,
    success,
  };

  const Eventstack = (props) => (<EventStack {...props} data={data1}/>);
  const Groupstack = (props) => (<GroupStack {...props} data={data1}/>);
  const Contactstack = (props) => (<ContactStack {...props} data={data1}/>);

  updateGroup = (group_id1, grp_name1) => {
    setGroup_id(group_id1);
    setGrp_name(grp_name1);
  };

  updateToken = (result1) => {
    setResult(result1);
  };

  updateGrpmember = (grpmember_id1, alias1, role1, contact_id1) => {
    setGrpmember_id(grpmember_id1);
    setAlias(alias1);
    setRole(role1);
    setContact_id(contact_id1);
  };

  if (!data1.success || !result || !myself) {
    return (     
      <Stack.Navigator initialRouteName="Signup">
        <Stack.Screen name="Signup" component={SignupWithDeviceId} />
        <Stack.Screen name="Verif1" component={Verif1WithDeviceId} />
        <Stack.Screen name="SplashScreen" component={SplashScreen} options={{headerShown:false}}/>
      </Stack.Navigator>
    )
  };
  let authVal = {
    myself,
    result,  
    updateToken,  
  }
  let stateVal = {
    group_id,
    grp_name,
    role,
    alias,
    updateGroup,
    updateGrpmember,
  }
  let propsVal = {
    device_id,
  }
  return (
    <propsContext.Provider value={propsVal}>
      <authContext.Provider value={authVal}>
        <stateContext.Provider value={stateVal}>
        <BTab.Navigator>
            <BTab.Screen name="Event" component={Eventstack} />

        </BTab.Navigator>
        </stateContext.Provider>
      </authContext.Provider>
    </propsContext.Provider>

  );
};

export default function App() {

  return (
    <NavigationContainer>
      <Stack.Navigator InitialRouteName="Splash">
        <Stack.Screen name="Splash" component={SplashScreen} options={{headerShown:false}}/>
        <Stack.Screen name="App" component={AppScreen} options={{headerShown:false}} />
      </Stack.Navigator>

    </NavigationContainer>
  );
}

这里是最初加载的Event组件。

单击test时，应加载Chat组件，但没有加载，并且屏幕保持不变。即使日志文件确实显示Chat组件的代码已执行。我的react-navigation升级有什么问题？

Answer 1

您是否遵循了升级指南？

Upgrading from 4.x