React Native 之 LandingPage 示例演示

[chenbin92]

完整示例代码

先来看看下面实现的效果图，你会发现这是一个常见的应用程序启动时的滑动介绍效果(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，下面我们看看如果将它链接起来：

这里我们主要使用了react-native 提供的 navigator 组件和 navigatorIOS 组件来完成由 LandingPage component——> Login component ——> TabBar component 的一个路由过程：

// 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 嵌套问题

NavigatorIOS 不能出现多层嵌套，否则会出现以下错误，解决方案详见

Invariant Violation: No navigator item should be pushed without JS knowing about it 1 0"

参考文档

• navigator
• navigatorIOS
• React Native控件之TextInput组件讲解与QQ登录界面实现