view.js

import React, { useState } from 'react'
import { TextInput, View, Text, Button, Alert } from 'react-native'
import { styles } from './styles'
import { setUnit } from '../../libs/utils'

const Page: () => React$Node = () => {
    const [passwd, setPasswd] = useState('')
    const change = text => {
        setPasswd(text)
    }
    const list = [0,0,0,0,0,0]
    const item = list.map((e, k) => {
        return (
            <View style={{ ...styles.passwdItem, left: setUnit(k * 100) }} key={k} >
                { passwd.length > k && <Text style={styles.itemIcon} />}
            </View>
        )
    })
    const submit = () => {
        if (passwd.length >= 6) Alert.alert('支付密码不正确')
        else Alert.alert('请输入6位数密码')
    }
    return (
        <View style={styles.body}>
            <View style={styles.passwdBox}>
                {item}
                <TextInput value={passwd} secureTextEntry={true} maxLength={6} onChangeText={change} keyboardType="numeric" style={styles.passwd} />
            </View>
            <Button title="购买" onPress={submit} />
        </View>
    )
}

export default Page