create-native-di/src/screens/login/index.js

cli สำหรับ react native ที่มีตัวอย่างโครงสร้างพื้นฐานพร้อมใช้งานประกอบไปด้วย package หลักๆ เช่น mobx,moment,lodash และรองรับภาษา javascript es6 และมี di สำหรับสลับ Store ที่จะติดต่อ api กับ fake mockup ที่สร้างขึ้นเอง ^^

import React, { Component } from "react";
import { ImageBackground, View, StatusBar } from "react-native";
import { Container, Header, Content, Form, Item, Input, Label, Button, Text } from 'native-base';

import { observable, action } from "mobx"
import { observer } from "mobx-react"
import styles from "./styles";

@observer
class Login extends Component {

  @observable username
  @observable password

  render() {
    return (
      <Container style={styles.container}>
          <View style={styles.logoContainer}>

          </View>
        
        <Content>
          <Form>
            <Item floatingLabel>
              <Label>Username</Label>
              <Input
                value={this.username}
                onChangeText={e => this.username = e} />
            </Item>

            <Item floatingLabel>
              <Label>Password</Label>
              <Input
                secureTextEntry
                value={this.password}
                onChangeText={e => this.password = e} />
            </Item>

          </Form>
          <Button
            disabled={!this.username || !this.password}
            block
            style={styles.btnLogin}
            onPress={() => this.props.navigation.navigate("JobList")}>
            <Text>Login</Text>
          </Button>
        </Content>
      </Container>
    );
  }
}

export default Login;