0
点赞
收藏
分享

微信扫一扫

React Native Elements

​​https://reactnativeelements.com/​​

装包:

yarn add @rneui/themed @rneui/base
yarn add react-native-safe-area-context

React Native Elements_javascript 

按钮、加载中进度条 ,分割线:

import React, { useState, useRef, useEffect } from 'react'
import { View, TextInput, Text } from 'react-native'
import style from './src/static/style/index.js'
import Api from './src/api'
import { Icon } from './src/component/light'
import { Divider, LinearProgress, Button } from '@rneui/themed'

export default function App() {
const [username, setUsername] = useState('admin')
const [password, setPasswork] = useState('123456')
const [visible, setVisible] = useState(false)
const [isLoading, setIsLoading] = useState(false)
const usernameEl = useRef(null)

const handleInput = (e) => {
console.log(e)
setUsername(e)
}

const handleLogin = () => {
console.log(777, username, password)
Api.light.getUserInfo().then((res) => {
console.log(res)
})
setIsLoading(true)
Api.light.login({ username, password }).then((res) => {
console.log(res)
setIsLoading(false)
})
}

const handleVisilbe = () => {
setVisible(!visible)
}

useEffect(() => {
//usernameEl.current.focus()
//console.log(666, usernameEl.current.isFocused())
}, [])

return (
<View style={style.mLoginWrap}>
<LinearProgress style={[style.mLoading, isLoading ? style.mLoadingActive : {}]} color="primary" />
<View style={style.mLoginRow}>
<TextInput
style={style.mLoginInput}
value={username}
onChangeText={handleInput}
// autoFocus
ref={usernameEl}
></TextInput>
</View>
<View style={style.mLoginRow}>
<TextInput
style={style.mLoginInput}
value={password}
onChangeText={setPasswork}
secureTextEntry={!visible}
></TextInput>
<Icon
name={visible ? 'show' : 'close'}
size={40}
color="#333"
onPress={handleVisilbe}
style={style.mLoginPasswordIcon}
></Icon>
</View>
<View style={style.mLoginRow}>
<Button onPress={handleLogin} type="solid" title="登录"></Button>
</View>
<Divider></Divider>

</View>
)
}


举报

相关推荐

0 条评论