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 (
       <Navigator
          initialRoute={{ name: defaultName,component: defaultComponent }}
          configureScene={(route) => {
            return Navigator.SceneConfigs.VerticalDownSwipeJump;
          }}
          renderScene={(route,navigator) => {
            let Component = route.component;
            return <Component {...route.params} navigator={navigator} />
          }} 
          navigationBar={
            <Navigator.NavigationBar 
              style={{
                alignItems: 'flex-start',backgroundColor: '#4f81bd',shadowOffset:{
                width: 1,height: 0.5,},shadowColor: '#55ACEE',shadowOpacity: 0.5,}} 
            routeMapper={ NavigationBarRouteMapper } />
          } 
        />
    );
  }
}


var NavigationBarRouteMapper = { 
  LeftButton(route,navigator,index,navState) {
        if(index > 0) {
          return (
            <TouchableOpacity 
              onPress={() => navigator.pop()}
              style={styles.button}>
              <Text style={styles.buttonText}>返回</Text>
            </TouchableOpacity>
          );
        } else {
          return (
            <TouchableOpacity 
              onPress={() => navigator.pop()}
              style={styles.button}>
              <Text style={styles.buttonText}>欢聚云</Text>
            </TouchableOpacity>
          );
        }
      },RightButton(route,navState) {
        if(index > 0 && route.rightButton) {
          return (
            <TouchableOpacity 
              onPress={() => navigator.pop()}
              style={styles.button}>
              <Text style={styles.buttonText}></Text>
            </TouchableOpacity>
          );
        } else {
          return null
        }

      },Title(route,navState) {
        return (
          <View style={styles.title}>
            <Text style={styles.buttonText}>{route.title ? route.title : ''}</Text>
          </View>
        );
      }
}



const styles = StyleSheet.create({
      title: {
        flex: 1,alignItems: 'center',justifyContent: 'center'
      },button: {
        flex: 1,width: 100,buttonText: {
        fontSize: 18,color: '#FFFFFF',fontWeight: '400',justifyContent: 'center'
      }
});


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

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

import React,TextInput,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 (
       <View style={styles.container}>
          <View>
             <Text style={styles.welcome}>
               欢聚云登录
             </Text>
             <TextInput  style={{ borderColor: '#000000',borderWidth: 1,backgroundColor: '#1d76bd',color: '#fff',height: 40,opacity:0.5,}} placeholderTextColor='#fff' placeholder={'账号'} />
             <TextInput  style={{ borderColor: '#000000',marginTop:20}} placeholderTextColor='#fff' placeholder={'密码'}/>
             <Button onPress={this._openPage.bind(this)} containerStyle={{padding:10,height:45,overflow:'hidden',borderRadius:4,backgroundColor: 'white'}} style={{fontSize: 20,color: '#3d89e5'}} styleDisabled={{color: 'red'}} >
               登录
             </Button>
           </View>
       </View>
    );
  }


  //方法
  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',backgroundColor: '#fff',paddingBottom: 10,paddingTop: 100,paddingLeft: 50,paddingRight: 50,flexDirection:'column',welcome: {
    fontSize: 20,textAlign: 'center',margin: 10,});

具体效果如下：