Question

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

我的应用程序目前正构建如下：

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

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

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

现在，当状态改变时，我不知道全新的视图渲染

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

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

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

Answer 1

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

这是一个tutorial from the TaskRabbit blog，可以帮助您入门。

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

Answer 2

从页面到另一页面的转换只是导航。

为了在React Native中从一个页面导航到另一个页面，您需要一个导航库。

React Native的默认Navigator组件也许可以使用，但是它有很多局限性和问题，大多数人使用的默认解决方案（强烈建议在RN三年后使用）是React Navigation。如果您使用的是Expo，则默认情况下也会附带它，因此您可以jump right into it并按如下方式定义屏幕：

import React from 'react';
import { View, Text } from 'react-native';
import { createAppContainer } from 'react-navigation';
import { createStackNavigator } from 'react-navigation-stack';

class HomeScreen extends React.Component {
  render() {
    return (
      <View style={{ flex: 1, alignItems: 'center', justifyContent: 'center' }}>
        <Text>Home Screen</Text>
      </View>
    );
  }
}

const AppNavigator = createStackNavigator({
  Login: {
    screen: LoginView,
  },
  Register: {
    screen: RegisterView,
  },
});

export default createAppContainer(AppNavigator);

否则，请here's a quick start guid to using it outside of Expo。

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

2 个答案: