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, navigator, index, 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, navigator, index, 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, 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 (       <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', borderWidth: 1, backgroundColor: '#1d76bd',color: '#fff', height: 40, opacity:0.5,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',    alignItems: 'center',    backgroundColor: '#fff',    paddingBottom: 10,    paddingTop: 100,    paddingLeft: 50,    paddingRight: 50,    flexDirection:'column',  },  welcome: {    fontSize: 20,    textAlign: 'center',    margin: 10,  },});

  具体效果如下：