ios - 如何在 react native 中实现 "View slide-in"效果？
<p><p>我目前正在开发我的第一个 react-native 应用程序，我想知道如何实现新 View 的幻灯片效果以及应该将“隐藏” View 放置在哪里。</p>
<p>我的应用程序目前是这样构建的:</p>
<pre><code><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>
</code></pre>
<p>正如您在这段基本代码中看到的，我想在按下可触摸组件后立即滑入注册 View 。</p>
<p>我是否需要在一侧存储宽度为 0、高度为 100% 的“不可见” View ，然后将其设置为完整的设备宽度？</p>
<p>现在我不知道状态变化时会渲染一个全新的 View </p>
<pre><code>render(){
return({this.state.view == 'login' ? <LoginView /> : <RegistryView />});
}
</code></pre>
<p>不幸的是，这会触发“硬” View 更改，而不是 View 滑入时从右到左或从左到右的平滑动画。</p>
<p>如果我的问题不清楚，请告诉我 - 我很乐意指定它:) 谢谢你的帮助</p></p>
<br><hr><h1><strong>Best Answer-推荐答案</ strong></h1><br>
<p><p>您应该将应用程序拆分为多个场景(屏幕)并使用 <a href="https://facebook.github.io/react-native/docs/navigator.html#content" rel="noreferrer noopener nofollow">Navigator</a>在场景之间转换的组件。</p>
<p>这里是 <a href="http://tech.taskrabbit.com/blog/2015/09/21/react-native-example-app/" rel="noreferrer noopener nofollow">tutorial from the TaskRabbit blog</a>让你开始。</p>
<p>设置好场景后，您可以尝试不同的 <a href="https://github.com/facebook/react-native/blob/master/Libraries/CustomComponents/Navigator/NavigatorSceneConfigs.js" rel="noreferrer noopener nofollow">SceneConfigs</a>用于不同类型的过渡动画。</p></p>
<p style="font-size: 20px;">关于ios - 如何在 react native 中实现"View slide-in"效果？，我们在Stack Overflow上找到一个类似的问题：
<a href="https://stackoverflow.com/questions/35195689/" rel="noreferrer noopener nofollow" style="color: red;">
https://stackoverflow.com/questions/35195689/
</a>
</p>
页:
[1]