Question

说我有屏幕1 和屏幕2 。我通过按下从屏幕1 导航到屏幕2 。因此，屏幕1 仍然存在，并且其状态不变。但是，我希望能够导航到第三个屏幕，即屏幕3 ，其状态与屏幕1 完全相同（一个副本），但其作用类似于< strong>推。

从屏幕1 推到屏幕2 给了我一张卡片过渡，但我基本上想从屏幕2 推到屏幕3 （另一张卡片转换），但屏幕3 具有与屏幕1 相同的状态，例如滚动相同，数据相同，等

编辑：不幸的是，我无法上传任何gif文件进行澄清，因为其中许多文件太大。一个例子来自Reddit应用程序：从表格视图转到查看帖子（选项卡视图消失），但是当您单击子redditit的名称时，它将带（带有推送动画）进入另一个选项卡视图，却是同一个人。

编辑2： Here is a link of a screen recording of what I want.

第一个屏幕显示我向下滚动到某个区域。（表格视图）-Screen 1
然后有一个卡导航到“查看帖子屏幕”，您可以在其中查看评论等（无标签）-Screen 2
然后，我单击r / aww，它随卡过渡到subreddit页面而导航。（表格视图）-Screen 3
Screen 3的选项卡被滚动到与Screen 1中滚动的位置相同的位置。这就是我所说的“相同状态”。

按另一条相同名称的路由不起作用，因为所有设置都恢复为默认设置，这对用户体验不利。后退将不起作用，因为它将显示卡片从Screen 2到Screen 3的“返回”过渡-卡片“推”的过渡更为自然。

Answer 1

在react-navigation中，从理论上讲，您可以导航到同一屏幕的无限。如果要更改屏幕内容，可以使用导航参数。您可以以instagram应用为例。

用户（我）->关注者->用户（爱丽丝）->关注者->用户（鲍勃）->关注者->用户（约翰）

const Navigator = createStackNavigator({
  Followers: { screen: Followers },
  User: { screen: Profile },
});

/...
this.props.navigation.navigate('User', { user: 'me' });
this.props.navigation.navigate('Followers', { user: 'me' });
this.props.navigation.navigate('User', { user: 'Alice' });
this.props.navigation.navigate('Followers', { user: 'Alice' });
this.props.navigation.navigate('User', { user: 'Bob' });
this.props.navigation.navigate('Followers', { user: 'Bob' });
this.props.navigation.navigate('User', { user: 'John' });

Answer 2

我对用例场景的理解是，您希望在不同的屏幕上保留组件的样式和结构。我在这里有两点：

如果两个屏幕（Screen1和Screen3）完全相同，那么为什么要首先复制？为什么不再次显示Screen1来减小堆栈大小呢？在您的示例中：用户位于Screen1，这是subreddit的主页。然后，他们单击发布链接，将其带到Screen2。再次，当用户单击subreddit主页的链接时，他们没有打开新屏幕，而只是返回回到原始Screen1。
如果两个屏幕之间存在细微差异，则可以简单地重复使用组件。就像，如果有两个子索引r/android和r/reactnative，则它们将具有单个组成部分：<SubRedditComponent>，但它们的数据和样式将有所不同。
< / li>

反应导航：状态与先前的路线相同，但可以作为推动路线？

2 个答案: