反应导航:具有相同的状态,以前的路线,而是充当推?(react-navigation: have t

2019-09-30 01:33发布

说我有屏幕1屏幕2。 我从屏幕1通过推导航到屏幕2。 所以屏幕1仍然存在,并且其状态不变。 但是,我希望能够导航到第三个屏幕, 屏幕3,具有完全相同的状态为屏幕1(复印件),但就像一

屏幕1推到屏幕2给了我一张卡过渡,但我基本上是想从屏幕2推到屏幕3(另一张卡转变),但屏幕3具有相同的状态画面1,像滚动是一样的,数据是相同的,等

编辑:不幸的是,我不能上传任何GIF文件的澄清,因为其中不少是太大。 一个例子是从reddit的应用:从表格视图移动到查看职位(其中标签视图中消失),但是当你点击版(Subreddit)的名字,它需要你(用推动画)到另一个选项卡视图,但它是同一个。

编辑2: 这里是我想要的画面记录的链接。

  1. 因此,第一个屏幕显示我向下滚动到一定的区域。 (表格视图) - Screen 1
  2. 然后有一个卡导航到“查看帖子屏幕”,在这里你可以看到评论等(无标签) - Screen 2

  3. 然后我点击R /噢,这与卡过渡到版(Subreddit)页面导航。 (表格视图) - Screen 3

  4. 为标签Screen 3被滚动到同一个地方如我在滚动Screen 1 。 这就是我的意思是“相同的状态”。

推同名的另一个途径是不行的,因为一切都重新设置为默认值,将是坏的用户体验。 回去是行不通的,因为它会显示一张牌。“回去”从过渡Screen 2Screen 3 -一卡“推”的过渡更加自然。

Answer 1:

react-navigation ,你可以浏览到无限-在理论上-同一屏幕。 如果你想改变你可以使用导航参数屏幕的内容。 你可以把Instagram的应用程序,例如。

用户(我) - >关注 - >用户(爱丽丝) - >关注 - >用户(BOB) - >关注 - >用户(约翰)

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:

我对你的使用情况的理解是,要保留在不同的屏幕组件的造型和结构。 我这里有两个外卖:

  • 如果两个屏幕( Screen1Screen3 )是完全一样的,那么为什么你要在第一时间重复? 为什么不显示Screen1再次保持你的堆栈大小小? 在您的例子:用户在Screen1这是版(Subreddit)的主页。 然后,他们点击一个链接后,其采取他们的Screen2 。 同样,当链接版(Subreddit)的网页上用户点击,他们不打开一个新的屏幕 ,他们只是要回到原来的Screen1

  • 如果在两个屏幕之间细微的差别,你可以简单地使用组件的再利用。 就像,如果有两个subreddits r/androidr/reactnative ,你必须对他们俩的单个组件: <SubRedditComponent>但他们的数据和造型会有所不同。



文章来源: react-navigation: have the same state as a previous route, but act as a push?