好久沒弄ReactNative了, 寫個怎樣實現閃屏(Splash)的文章吧.

註意:
(1) 怎樣切換頁面.
(2) 怎樣使用計時器TimerMixin.
(3) 怎樣使用動畫效果.
(4) 怎樣載入Android的項目資源(圖片).

1. 準備

新建項目, 加入主模塊index.android.js.

/* @flow */
/**
 * 測試
 * @author wangchenlong
 */
‘use strict‘;

var React = require(‘react-native‘);
var {
  AppRegistry,
  } = React;

var
 
 LearningRN = require(‘./main_modules/index.js‘);

AppRegistry.registerComponent(‘LearningRN‘, () => LearningRN);

[email protected]*/作為跳轉和檢查的註解. 參考.

2. 首頁

主要包括閃屏和主頁, 使用Navigator的棧, 用於加入額外的頁面.

/* @flow*/
‘use strict‘;

var React = require(‘react-native‘);
var {
  Text,
  View,
  Navigator,
  BackAndroid,
} = React;

var
 
 styles = require(‘./styles‘); // 樣式

var TimerMixin = require(‘react-timer-mixin‘); // RN的計時器

var SplashScreen = require(‘./splash_screen/index‘); // 飛屏

var MainScreen = require(‘./main_screen/index‘); // 主屏

var _navigator; // 頁面管理器


// 後退button
BackAndroid.addEventListener(‘hardwareBackPress‘, function () {
  if
 
 (_navigator && _navigator.getCurrentRoutes().length > 1) {
    _navigator.pop();
    return true;
  }
  return false;
});

var LearningRN = React.createClass({

  mixins: [TimerMixin], // 延遲器

  // 初始化狀態
  getInitialState: function () {
    return {
      splashed: true
    };
  },

  // 頁面載入
  componentDidMount: function () {
    this.setTimeout(
      ()=> {
        this.setState({splashed: false});
      }, 2000);
    },

    // 線路映射
    routeMapper: function (route: Map, navigator: Navigator) {
      _navigator = navigator;

      if (route.name === ‘home‘) {
        return (
          <View style={styles.container}>
            <MainScreen/>
          </View>
        );
      }
    },

    render: function () {
      if (!this.state.splashed) {
        // 初始路徑
        var initialRoute = {name: ‘home‘};

        return (
          <Navigator
          style={styles.container}
          initialRoute={initialRoute}
          configureScene={() => Navigator.SceneConfigs.FadeAndroid}
          renderScene={this.routeMapper}/>
        );
      } else {
        return (
          <SplashScreen/> /*飛屏*/
        );
      }
    }
  });

  module.exports = LearningRN;

後退button優先退出棧的頁面, 最後作為結束.
閃屏顯示兩秒鐘, 使用TimerMixin計時器, 再更新狀態跳轉主頁.
在routeMapper中, 眼下主頁, 以後再加入其它頁面.

樣式

[email protected]*/
/**
 * Created by wangchenlong on 15/11/29.
 */
‘use strict‘;

var React = require(‘react-native‘);

var {
  StyleSheet
  } = React;

var styles = StyleSheet.create({
  container: {
    flex: 1,
    flexDirection: ‘column‘
  },
});

module.exports = styles;

3. 閃屏

首頁圖片, 有個放大效果, 至1.2倍, 持續兩秒(2000ms).
資源文件(uri)使用項目資源, 放在Android項目的drawable目錄.

/* @flow*/
/**
 * 啟動閃屏
 * @author C.L.Wang
 */
‘use strict‘;

var React = require(‘react-native‘);

var {
  View,
  Text,
  Image,
  Dimensions, // 尺寸
  Animated,   // 動畫
  } = React;

var styles = require(‘./styles.js‘);

var WIDTH = Dimensions.get(‘window‘).width;

var SplashScreen = React.createClass({

  // 初始化狀態
  getInitialState: function () {
    return {
      cover: {image: {uri: ‘splash‘}, text: ‘Girl\‘s Generation‘}, // 封面
      bounceValue: new Animated.Value(1) // 彈力值
    };
  },

  // 組件初始化
  componentDidMount: function () {
    Animated.timing(
      this.state.bounceValue, {toValue: 1.2, duration: 2000}
    ).start();
  },

  render: function () {
    return (
      <View style={styles.container}>
        <Animated.Image
          source={{uri: ‘splash‘}} // 混合資源
          style={{
            flex: 1,
            width: WIDTH,
            height: 1,
            transform: [{scale: this.state.bounceValue}]
          }}/>
        <Text style={styles.text}>
          {this.state.cover.text}
        </Text>
      </View>
    );
  }
});

module.exports = SplashScreen;

在Androidproject中放置圖片資源, 改動時又一次編譯打包, 適配屏幕尺寸.
在RNproject中放置, 改動時刷新就可以, 但無法適配. 使用時, 依據圖片特點, 選擇位置.

樣式

[email protected]*/
/**
 * Created by C.L.Wang on 15/11/29.
 */
‘use strict‘;

var React = require(‘react-native‘);

var {
  StyleSheet
  } = React;

var styles = StyleSheet.create({
  container: {
    flex: 1,
    flexDirection: ‘column‘
  },
  text: {
    flex: 1,
    fontSize: 16,
    textAlign: ‘center‘,
    color: ‘#FF1493‘,
    position: ‘absolute‘,
    left: 0,
    right: 0,
    bottom: 10,
    backgroundColor: ‘transparent‘
  }
});

module.exports = styles;

Github下載地址

這次的比較簡單. 我會再寫一些復雜的頁面.
OK, Enjoy it.

閃屏(Splash)