如何在本机中实现“查看幻灯片”效果？

I am currently working on my very first react native applikation and am wondering how that slide in effect of a new view can be achieved and where that "hidden" view should be placed.

我目前正在研究我的第一个反应本机应用程序，并想知道如何实现新视图的效果以及应该放置“隐藏”视图的位置。

My Application is currently build like this:

我的应用程序目前是这样构建的：

<View style={{flex:1}}>
 <View style={{flex:.8, justifyContent:'center'}}>
   .. some login Form
 </View>
 <View style={{flex:.2, justifyContent:'center', alignItems:'center'}}>
  <TouchableHighlight onPress={this._toggleRegistryView}>
     <Text> or register here </Text>
   </TouchableHighlight>
  </View>
</View>

As you can see in this basic code I want to slide-in the Registration View as soon as the touchable component is pressed.

正如您在此基本代码中所看到的，我想在按下可触摸组件后立即滑入注册视图。

Do I need to store the view "invisible" with a width of 0 and height of 100% on one side and then animate it to the full device width?

我是否需要在一侧存储宽度为0且高度为100％的视图“不可见”，然后将其设置为完整的设备宽度？

Right now I have no idea beside a whole new view render when the state changes

现在，当状态发生变化时，我不知道在全新的视图渲染旁边

render(){
   return({this.state.view == 'login' ? <LoginView /> : <RegistryView />});
}

Unfortunately this triggers a "hard" view change and not a smooth right to left or left to right animation where the view slides in.

不幸的是，这会触发“硬”视图更改，而不是视图滑入的平滑的从右到左或从左到右的动画。

If my question was unclear please inform me - i'll gladly try to specify it :) Thank you for your help

如果我的问题不清楚请通知我 - 我很乐意尝试指定它:)谢谢你的帮助

1 个解决方案

#1

You should split your application into multiple scenes (screens) and use the Navigator component to transition between the scenes.

您应该将应用程序拆分为多个场景（屏幕），并使用导航器组件在场景之间进行切换。

Here is a tutorial from the TaskRabbit blog to get you started.

以下是TaskRabbit博客的教程，可帮助您入门。

Once you have you scenes set up, you can experiment with different SceneConfigs for different types of transition animations.

一旦设置了场景，就可以针对不同类型的过渡动画尝试不同的SceneConfigs。

#1