单例是在程序设计非常基础的东西,用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,});
具体效果如下:
原文链接:https://www.f2er.com/react/306595.html