Class Notes compendium

addimage.jsx

<Image source={require('./example.png')}>

blah

blah

Drawer.jsx

import DrawerLayout from 'react-native-drawer-layout';

export default class Inside extends Component {

  openSideBar(){
    this.refs['DRAWER'].openDrawer();
  }

  render() {
    var navigationView = 
        <View style={{flex: 1, backgroundColor: '#fff'}}>
          <Text style={{margin: 10, fontSize: 15, textAlign: 'left'}}>Im in the Drawer!</Text>
        </View>;
    return (
      <DrawerLayout
        drawerWidth={300}
        ref={'DRAWER'}
        drawerPosition={DrawerLayout.positions.Left}
        renderNavigationView={() => navigationView}>
        <View style={styles.drawme}>
          <TouchableHighlight onPress={this.openSideBar.bind(this)}>
            <View style={styles.somebutton}></View>
          </TouchableHighlight>
        </View>
      </DrawerLayout>
    );  
  }
}

how-to-set-state.js

  //how to set a state
  constructor(props) {
    super(props);
    this.state = { 
      exstate: 'value'
    };
  }

index.ios.js again

import React, { Component } from 'react';
import {
  AppRegistry,
  StyleSheet,
  Text,
  View,
  TouchableHighlight,
  StatusBar,
  Navigator,
} from 'react-native';
import Login from './Login'
export default class testcoolapp extends Component {

  renderScene(route, navigator){ 
    return <route.component navigator={navigator} props={route.passProps} />
  }

  render() {
    return (
      <Navigator
        initialRoute={{component: Login}}
        renderScene={this.renderScene}/>
    );
  }
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
  },
});

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

index.ios.jsx

  renderScene(route, navigator){ 
    return <route.component navigator={navigator} props={route.passProps} />
  }

  render() {
    return (
      <Navigator
        initialRoute={{component: Login}}
        renderScene={this.renderScene}/>
    );
  }

login.js

import React, { Component } from 'react';
import {
  AppRegistry,
  StyleSheet,
  Text,
  View,
  Navigator,
  Image,
  TouchableHighlight,
} from 'react-native';

import Register from './Register';

export default class Login extends Component {
  linker(comp){
    this.props.navigator.push({
      component: comp
    })
  }

  render() {
    return (
      <Image source={require('./lin.png')} style={styles.container}>
        <Image source={require('./logo.png')} style={styles.logoh} resizeMode={'contain'}/>
          <TouchableHighlight onPress={this.linker.bind(this, Register)} underlayColor={'transparent'}>
            <View style={styles.bigbutt}></View>
          </TouchableHighlight>
      </Image>
    );
  }
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    height: null,
    width: null,
    alignItems: "center"
  },
  bigbutt: {
    backgroundColor: "rgb(0,235,194)",
    height:60,
    width:300,
  },
  logoh: {
    width: 100,
  }
});

navigation.js

  // how to go to a page
  linker(comp){
    this.props.navigator.push({
      component:comp
    })
  }

  // how to go back a page
  returner() {
    this.props.navigator.pop();
  }


  // how to reset the page stack
  this.props.navigator.immediatelyResetRouteStack([{
    component: comp
  }]);

register.jsx

import React, { Component } from 'react';
import {
  AppRegistry,
  StyleSheet,
  Text,
  View,
  Navigator,
  Image,
  TouchableHighlight,
} from 'react-native';


export default class Register extends Component {
  returner() {
    this.props.navigator.pop();
  }

  render() {
    return (
      <View style={styles.container}>
        <TouchableHighlight onPress={this.returner.bind(this)}>
          <View style={styles.bigbutt}></View>
        </TouchableHighlight>
      </View>
    );
  }
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: "white"
  },
  bigbutt: {
    backgroundColor: "rgb(0,235,194)",
    height:60,
    width:300,
  },
});