Open chenbin92 opened 8 years ago
先来看看下面实现的效果图,你会发现这是一个常见的应用程序启动时的滑动介绍效果(LandingPage),以及滑动完成时出现注册登录按钮,引导用户注册登录,之后进入应用程序的首页,现在许多流行的应用程序如 知乎、支付宝、叮叮 等都有类似的功能
知乎
支付宝
叮叮
react-native-swiper
react-native-swiper 是一款轮播组件,封装了不同风格的轮播效果,我们只需要使用 npm 来安装即可:
$ i react-native-swiper --save
安装成功后,需要确保组件能够正常使用,简单示例代码如下:
var Swiper = require('react-native-swiper') var swiper = React.createClass({ render: function() { return ( <Swiper style={styles.wrapper} showsButtons={true}> <View style={styles.slide1}> <Text style={styles.text}>第一张</Text> </View> <View style={styles.slide2}> <Text style={styles.text}>第二张</Text> </View> <View style={styles.slide3}> <Text style={styles.text}>第三张</Text> </View> </Swiper> ) } })
在 Swiper 组件中提供了很多的属性,可以根据需求高度化的定制 Swiper,具体请查看文档
观察上面的示例动画,我们可以发现 Swiper 的最后一页是会出现注册登录按钮,点击按钮会路由到详细的登录页面,我们先来实现简单的登录页面视图,暂时不考虑表单验证以及数据交换,我们会在后面详细去设计我们的表单;主要代码如下所示:
var Login = React.createClass({ render: function() { return ( <View style={styles.loginContainer}> <Image style={styles.logoImage} source={{uri: 'http://7xr387.com1.z0.glb.clouddn.com/logo2.png'}} /> <TextInput style={styles.accountInput} placeholder='Phone Number' /> <View style={{height:1,backgroundColor:'#f4f4f4'}} /> <TextInput style={styles.passowrdInput} placeholder='Passowrd' password={true} /> <View style={styles.loginButton}> <Text style={{color: '#fff'}} >Login</Text> </View> <View style={{flex:1,flexDirection:'row',alignItems: 'flex-end',bottom:10}}> <Text style={styles.viewUnlogin}> 无法登录? </Text> <Text style={styles.viewRegister}> 新用户 </Text> </View> </View> ) } })
上面我们准备好了 Swiper 和 Login 组件,以及上一篇文章实现的 TabBar,下面我们看看如果将它链接起来:
Swiper
Login
TabBar
这里我们主要使用了react-native 提供的 navigator 组件和 navigatorIOS 组件来完成由 LandingPage component——> Login component ——> TabBar component 的一个路由过程:
navigator
navigatorIOS
// from landingSwiper to login <Navigator initialRoute = {{name:"landingSwiper", component: LandingSwiper}} renderScene={(route, navigator) => { let Component = route.component; return <Component {...route.params} navigator={navigator} /> }} /> // from login to TabBar _login: function() { this.props.navigator.resetTo({ component: TabBar, title: 'Home', }) },
NavigatorIOS 不能出现多层嵌套,否则会出现以下错误,解决方案详见
Invariant Violation: No navigator item should be pushed without JS knowing about it 1 0"
完整示例代码
先来看看下面实现的效果图,你会发现这是一个常见的应用程序启动时的滑动介绍效果(LandingPage),以及滑动完成时出现注册登录按钮,引导用户注册登录,之后进入应用程序的首页,现在许多流行的应用程序如
知乎
、支付宝
、叮叮
等都有类似的功能安装
react-native-swiper
react-native-swiper 是一款轮播组件,封装了不同风格的轮播效果,我们只需要使用 npm 来安装即可:
演示示例
安装成功后,需要确保组件能够正常使用,简单示例代码如下:
在 Swiper 组件中提供了很多的属性,可以根据需求高度化的定制 Swiper,具体请查看文档
注册登录功能
观察上面的示例动画,我们可以发现 Swiper 的最后一页是会出现注册登录按钮,点击按钮会路由到详细的登录页面,我们先来实现简单的登录页面视图,暂时不考虑表单验证以及数据交换,我们会在后面详细去设计我们的表单;主要代码如下所示:
设计路由功能
上面我们准备好了
Swiper
和Login
组件,以及上一篇文章实现的TabBar
,下面我们看看如果将它链接起来:这里我们主要使用了react-native 提供的
navigator
组件和navigatorIOS
组件来完成由 LandingPage component——> Login component ——> TabBar component 的一个路由过程:NavigatorIOS 嵌套问题
NavigatorIOS 不能出现多层嵌套,否则会出现以下错误,解决方案详见
参考文档