Question

如何使用React Navigation for React Native替换屏幕

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

但是我需要在屏幕2之后用屏幕2替换屏幕1它处于活动状态（替换路由器通量上的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

“替换”仅在堆栈导航中可用

替换输入：

import { useNavigation } from '@react-navigation/core'
import { StackNavigationProp } from '@react-navigation/stack'

type YourNavigatorParamList = {
  CurrentScreen: undefined
  DifferentScreen: { username: string }
}

const navigation = useNavigation<StackNavigationProp<YourNavigatorParamList, 'CurrentScreen'>>()

navigation.replace('DifferentScreen', { username: 'user01' })

https://reactnavigation.org/docs/navigation-prop/#navigator-dependent-functions https://reactnavigation.org/docs/typescript#annotating-usenavigation

Answer 2

您可以使用navigation.replace

使用

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

代替

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

您可以在这里找到更多https://reactnavigation.org/docs/en/navigation-key.html

Answer 3

使用它代替导航。替换

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

Answer 4

如果有人还在想如何在 React Native 中替换屏幕并且正在使用 react-navigation，这里是：

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

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

有关更多信息，请参阅：https://reactnavigation.org/docs/stack-actions/#replace

如何使用React Navigation for React Native替换屏幕

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

4 个答案: