OStack程序员社区-中国程序员成长平台

标题: ios - 如何在 react native 中实现 "View slide-in"效果？ [打印本页]

---

作者: 菜鸟教程小白    时间: 2022-12-12 18:26
标题: ios - 如何在 react native 中实现 "View slide-in"效果？

我目前正在开发我的第一个 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 滑入时从右到左或从左到右的平滑动画。

如果我的问题不清楚，请告诉我 - 我很乐意指定它 谢谢你的帮助

---

Best Answer-推荐答案

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

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

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

关于ios - 如何在 react native 中实现 "View slide-in"效果？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/35195689/

---

欢迎光临 OStack程序员社区-中国程序员成长平台 (https://ostack.cn/)

Powered by Discuz! X3.4