ios - 如何在react native中实现 "View slide-in"的效果？

Question

我目前正在开发我的第一个 react-native 应用程序，我想知道如何实现新 View 的幻灯片效果以及应该将“隐藏” View 放置在何处。

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

<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>

如您在此基本代码中所见，我想在按下可触摸组件后立即滑入注册 View 。

我是否需要在一侧存储宽度为 0 且高度为 100% 的“不可见” View ，然后将其设置为全设备宽度的动画？

现在除了在状态改变时渲染一个全新的 View 之外我不知道

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

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

如果我的问题不清楚，请告诉我 - 我很乐意尝试详细说明 :) 谢谢你的帮助

Answer 1

您应该将您的应用程序拆分为多个场景(屏幕)并使用 Navigator在场景之间转换的组件。

这是一个tutorial from the TaskRabbit blog让你开始。

设置场景后，您可以尝试不同的 SceneConfigs用于不同类型的过渡动画。