React Native Elements_react native elements中文-CSDN博客

本文链接：https://blog.csdn.net/xutongbao/article/details/123995616

本文介绍了如何使用@rneui/themed库在React Native应用中实现简单登录界面，包括按钮、加载进度条和分割线的使用。开发者将学习如何处理输入验证和异步API调用，以完成用户注册和登录功能。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

装包：

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

按钮、加载中进度条，分割线：

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>
  )
}