view.js

import React, { useState } from 'react'
import { View, TextInput, Button, Alert, ActivityIndicator } from 'react-native'
import { styles } from './style'

import { login } from '../../api/user'

const Page: () => React$Node = ({ navigation ,loginSuccess = () => {} }) => {

    const [name, setName ] = useState('')
    const [passwd, setPasswd] = useState('')
    const [show, setShow ] = useState(false)

    const go = () => {
        setShow(true)
        login(name, passwd)
            .then(res => {
                setShow(false)
                loginSuccess(res.user)
                navigation.goBack()
            })
            .catch(err => {
                setShow(false)
                Alert.alert(err)
            })
    }

    return (
        <View style={styles.body}>
            {show && <ActivityIndicator size={40} style={styles.loading} /> }
            <TextInput style={styles.input} value={ name } onChangeText={val => setName(val)} clearButtonMode="unless-editing" placeholder="输入账户" />
            <TextInput style={styles.input} value={ passwd } onChangeText={val => setPasswd(val)} clearButtonMode="unless-editing" secureTextEntry={true} placeholder="输入密码"/>
            <View style={styles.button}>
                <Button title="登陆" onPress={ go } />
            </View>
        </View>
    )
}

export default Page