如何用 React Native 的 React Navigation 替换屏幕

Question

现在我是新手，我无法理解 getStateForAction 现在我在屏幕 1 上有参数，并通过传递参数用户名导航到屏幕 2 基本导航它的嵌套屏幕 1 > 2 在堆栈上

但我需要在屏幕 2 处于活动状态后将屏幕 1 替换为屏幕 2（像路由器通量上的 ActionConst.REPLACE 一样替换）并以新方式发送参数

有人可以指导我吗谢谢。

屏幕1

  onPress = () => {

          this.props.navigation.navigate('Sc2', {username: this.state.username});

  }

屏幕2

componentWillMount() {

const {state} = this.props.navigation;
console.log(state.params.username);

}

----------------

路由器

export const LoginNavStack = StackNavigator({
  Sc1: {
    screen: Sc1
  },
  Sc2: {
   screen: Sc2,
 },

});

Answer 1

如果有人仍在弄清楚如何替换 React Native 中的屏幕并正在使用react-navigation，这里是：

import { StackActions } from '@react-navigation/native';

navigation.dispatch(
  StackActions.replace('Profile', {
    user: 'jane',
  })
);

Answer 2

使用这个代替 navigation.replace

navigation.reset({
 index: 0,
 routes: [{ name: 'Profile' }],
 });

关于 navigation.reset() 的重要注意事项，它将清除您的导航堆栈并用新屏幕替换它。当您仍然需要保留一些导航历史记录时，这可能不是您想要的行为。例如：“导航堆栈：主页 -> 配置文件 -> 设置” 如果您在设置屏幕中调用重置并传递配置文件，则堆栈将如下所示“新导航堆栈：配置文件” 问题在于，当您想要向后导航时到主页，它将关闭应用程序，因为堆栈中没有上一个屏幕 (4认同)

Answer 3

您可以使用navigation.replace

使用

this.props.navigation.replace('Sc2');

代替

this.props.navigation.navigate('Sc2', {username: this.state.username});

我们如何在 Typescript 中使用替换？我得到这个``属性'替换'在类型'NavigationProp<Record<string, object | '上不存在未定义>, 字符串, NavigationState, {}, {}>'.ts(2339)``` (3认同)