登录使我们业务中不可缺少的功能，所以这篇我们学习写在react-native中实现表单登录

实现效果

代码实现

import {
  View,
  Text,
  StyleSheet,
  Dimensions,
  TextInput,
  Button,
  Alert,
} from 'react-native';
import {useEffect, useState} from 'react';
import Logo from '../../assets/images/logo.png';
import Ionicons from 'react-native-vector-icons/Ionicons';
import Swiper from 'react-native-swiper';

function HomeScreen() {
  const windowWidth = Dimensions.get('window').width;
  const [username, setUsername] = useState('');
  const [password, setPassword] = useState('');
  const handleLogin = () => {
    // alert('login');
    Alert.alert(username, password, [
      {text: '取消', onPress: () => console.log('Cancel Pressed')},
      {
        text: '确定',
        onPress: () => {
          setUsername('');
          setPassword('');
        },
      },
    ]);
    //清空输入框
  };
  return (
    <View
      style={{
        flex: 1,
        justifyContent: 'flex-start',
        alignItems: 'center',
        width: '100%',
        backgroundColor: '#F5FCFF',
        height: '100%',
      }}>
      <View style={[styles.box]}>
        <View>
          <Text style={styles.title}>奥运奖牌系统登录</Text>
        </View>
        <View style={styles.boxItem}>
          <Text style={{fontSize: 16}}>账 户:</Text>
          <TextInput
            style={[styles.input]}
            placeholder="请输入账户名"
            value={username}
            onChangeText={setUsername}
            maxLength={5}
          />
        </View>
        <View style={styles.boxItem}>
          <Text style={{fontSize: 16}}>密 码:</Text>
          <TextInput
            keyboardType="password"
            value={password}
            style={[styles.input]}
            placeholder="请输入密码"
            secureTextEntry
            onChangeText={setPassword}
            keyboardType="number-pad"
            maxLength={6}
          />
        </View>
        <View style={styles.btn}>
          <Button style={styles.loginBtn} title="登录" onPress={handleLogin} />
        </View>
      </View>
    </View>
  );
}
const styles = StyleSheet.create({
  box: {
    width: '100%',
    flexDirection: 'column',
    flex: 1,
    alignItems: 'center',
    padding: 10,
    // height: '100%',
    marginTop: 100,
  },
  title: {width: '100%', fontSize: 28, marginBottom: 20},
  boxItem: {
    width: '100%',
    flexDirection: 'row',
    marginBottom: 10,
    alignItems: 'center',
    justifyContent: 'center',
  },
  input: {
    width: '60%',
    height: 40,
    borderColor: '#ccc',
    borderWidth: 1,
    paddingHorizontal: 20,
    marginLeft: 10,
    borderRadius: 5,
  },
  btn: {
    width: '80%',
    marginTop: 30,
  },
  loginBtn: {},
});
export default HomeScreen;

注意点

• 跟web端的组件使用还是有区别的，特别是密码组件，比web的内容丰富，配置大不一样，需要仔细研究下官方组件文档
• 推荐使用受控组件，不然会出现闪烁的现象，影响体验。