说我有屏幕1和屏幕2。 我从屏幕1通过推导航到屏幕2。 所以屏幕1仍然存在,并且其状态不变。 但是,我希望能够导航到第三个屏幕, 屏幕3,具有完全相同的状态为屏幕1(复印件),但就像一推 。
从屏幕1推到屏幕2给了我一张卡过渡,但我基本上是想从屏幕2推到屏幕3(另一张卡转变),但屏幕3具有相同的状态画面1,像滚动是一样的,数据是相同的,等
编辑:不幸的是,我不能上传任何GIF文件的澄清,因为其中不少是太大。 一个例子是从reddit的应用:从表格视图移动到查看职位(其中标签视图中消失),但是当你点击版(Subreddit)的名字,它需要你(用推动画)到另一个选项卡视图,但它是同一个。
编辑2: 这里是我想要的画面记录的链接。
- 因此,第一个屏幕显示我向下滚动到一定的区域。 (表格视图) -
Screen 1
然后有一个卡导航到“查看帖子屏幕”,在这里你可以看到评论等(无标签) - Screen 2
然后我点击R /噢,这与卡过渡到版(Subreddit)页面导航。 (表格视图) - Screen 3
- 为标签
Screen 3
被滚动到同一个地方如我在滚动Screen 1
。 这就是我的意思是“相同的状态”。
推同名的另一个途径是不行的,因为一切都重新设置为默认值,将是坏的用户体验。 回去是行不通的,因为它会显示一张牌。“回去”从过渡Screen 2
到Screen 3
-一卡“推”的过渡更加自然。
在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' });
我对你的使用情况的理解是,要保留在不同的屏幕组件的造型和结构。 我这里有两个外卖:
如果两个屏幕( Screen1
和Screen3
)是完全一样的,那么为什么你要在第一时间重复? 为什么不显示Screen1
再次保持你的堆栈大小小? 在您的例子:用户在Screen1
这是版(Subreddit)的主页。 然后,他们点击一个链接后,其采取他们的Screen2
。 同样,当链接版(Subreddit)的网页上用户点击,他们不打开一个新的屏幕 ,他们只是要回到原来的Screen1
。
如果在两个屏幕之间细微的差别,你可以简单地使用组件的再利用。 就像,如果有两个subreddits r/android
和r/reactnative
,你必须对他们俩的单个组件: <SubRedditComponent>
但他们的数据和造型会有所不同。
文章来源: react-navigation: have the same state as a previous route, but act as a push?