React Native es6 单例例子

               

  单例是在程序设计非常基础的东西，用React Native做了一个简单单例的例子，只是玩玩而已，也做了一个笔记。

  单例的类，中间定了一个name的属性。

let instance = null;var name = '';export default class Singleton {    constructor() {        if(!instance){              instance = this;        }        return instance;     }    setName(name){  this.name=name;    }    getName(name){  return this.name;    }}

  设置name的属性，在其中一个Component里面，代码为20行21行。

/** * Sample React Native App * https://github.com/facebook/react-native * @flow */import React, { Component } from 'react';import {  AppRegistry,  StyleSheet,  Text,  Navigator,  TouchableOpacity,  View} from 'react-native';import LoginComponent from './../component/LoginComponent';import Singleton from './../util/Singleton';let singleton=new Singleton();singleton.setName('5678');class rndemo extends Component {  render() {    let defaultName = 'LoginComponent';    let defaultComponent = LoginComponent;    return (        {            return Navigator.SceneConfigs.VerticalDownSwipeJump;          }}          renderScene={(route, navigator) => {            let Component = route.component;            return           }}           navigationBar={                      }         />    );  }}var NavigationBarRouteMapper = {   LeftButton(route, navigator, index, navState) {        if(index > 0) {          return (             navigator.pop()}              style={styles.button}>                  返回                      );        } else {          return (             navigator.pop()}              style={styles.button}>                  欢聚云                      );        }      },    RightButton(route, navigator, index, navState) {        if(index > 0 && route.rightButton) {          return (             navigator.pop()}              style={styles.button}>                                    );        } else {          return null        }      },      Title(route, navigator, index, navState) {        return (                      {route.title ? route.title : ''}                  );      }}const styles = StyleSheet.create({      title: {        flex: 1, alignItems: 'center', justifyContent: 'center'      },      button: {        flex: 1, width: 100, alignItems: 'center', justifyContent: 'center'      },      buttonText: {        fontSize: 18, color: '#FFFFFF', fontWeight: '400',width: 100,justifyContent: 'center'      }});AppRegistry.registerComponent('rndemo', () => rndemo);

  在另外一个Component读取出来，获取代码为44行

import React, { Component } from 'react';import {  AppRegistry,  StyleSheet,  Text,  TextInput,  Navigator,  Alert,  View} from 'react-native';import Button  from 'react-native-button';import PageComponent from './PageComponent';import Singleton from './../util/Singleton';let singleton=new Singleton();export default class LoginComponent extends Component {  render() {    return (                                             欢聚云登录                                                                   登  录                                   );  }  //方法  constructor(props) {    super(props);    this.state = {};  }  _openPage() {    Alert.alert('Alert Title',singleton.getName());    const { navigator } = this.props;    navigator.push({      name: 'PageComponent',      component: PageComponent    })  }}const styles = StyleSheet.create({  container: {    flex: 1,    justifyContent: 'flex-start',    alignItems: 'center',    backgroundColor: '#fff',    paddingBottom: 10,    paddingTop: 100,    paddingLeft: 50,    paddingRight: 50,    flexDirection:'column',  },  welcome: {    fontSize: 20,    textAlign: 'center',    margin: 10,  },});

  具体效果如下：