React Native es6 单例例子

最新推荐文章于 2024-05-24 21:42:59 发布

原创最新推荐文章于 2024-05-24 21:42:59 发布 · 6.8k 阅读

0 ·

CC 4.0 BY-SA版权

移动端开发技能专栏收录该内容

6 篇文章

订阅专栏

本文介绍了如何在React Native中使用ES6语法实现单例模式，通过一个简单的实例展示了单例类的设计，并设置了name属性。

单例是在程序设计非常基础的东西，用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,
  },
});

具体效果如下：