React Native -- 引导页面

A4B0671F-799C-43C8-AF87-15AB69038A12.png

最近工作忙，搞得RN学学停停的，今天回来看了下别人开源的应用，看得一脸懵逼的，好吧，还是从最简单的入手。

这里通过ScrollView来实现一个引导页面的功能，init工程这些就不说了，直接看rn官网就可以了，首先为了方便获取屏幕的大小，我们来实现一个公共的类：

import React from 'react';
import Dimensions from 'Dimensions';

const Util = {
  size: {
    width: Dimensions.get('window').width,
    height: Dimensions.get('window').height
  },
};

export default Util;

然后我们再创建一个引导页面 guideView.js，目录如下：

6CD645BB-FD8A-4BD4-B815-0A2E42F08B68.png

guide目录下存入资源文件，view目录下存放页面文件。

guideView 内容：

'use strict';
import React, {Component} from 'react';
import {
  Image,
  ScrollView,
  StyleSheet,
  Text,
} from 'react-native';

let image1 = require('../guide/guide_1.png');
let image2 = require('../guide/guide_2.png');
let image3 = require('../guide/guide_3.png');
import Util from './utils';

export default class extends Component {
  constructor() {
      super();
    };
  render() {
    return (
      <ScrollView
        contentContainerStyle={styles.contentContainer}
        bounces={false}
        pagingEnabled={true}
        horizontal={true}>
        <Image source={image1} style={styles.backgroundImage} />
        <Image source={image2} style={styles.backgroundImage} />
        <Image source={image3} style={styles.backgroundImage} />
      </ScrollView>
    );
  }
};

var styles = StyleSheet.create({
    contentContainer: {
      width: Util.size.width*3,
      height: Util.size.height,
    },
    backgroundImage: {
      width: Util.size.width,
      height: Util.size.height,
    },
});

这里需要注意下的就是contentView的内容的宽度应该对应你引导页面的宽度，比如这里有三张图，那应该就是屏幕宽度的三倍。

bounces 属性指的是第一张或最后一张是否有弹簧效果。

pagingEnabled 就是分页效果了。

最后在index.ios.js里面调用：

'use strict';
import React, { Component } from 'react';
import {
  AppRegistry
} from 'react-native';

import Guide from './view/guideView';

export default class GuideView extends Component {
  render() {
    return (
      <Guide />
    );
  }
}

AppRegistry.registerComponent('GuideView', () => GuideView);

最终效果：

123.gif

新手入门RN的同学们，千万不想相信 react native 中文网推荐的风耀的视频，买了vip入去，发现视频不更新，先不说视频质量怎么样，感觉照搬某课网的，这都可以忍，但天天推广点公益，也敢叫公益的公益。被骗得不要不要。