React Native登录页text input输入框与button按钮UI实现问题

实现思路 #

• 输入框采用View容器包裹TextInput的结构，圆角、阴影等装饰效果全部放在外层容器实现，避免输入框自带样式的兼容问题
• 按钮统一用TouchableOpacity实现，主按钮和次要按钮的样式区分通过背景色、字体色做差异化处理
• 所有圆角统一设置为8px，阴影参数保持一致，避免视觉上的割裂感

可直接运行的示例代码 #

import React, { useState } from 'react';
import { View, TextInput, TouchableOpacity, Text, StyleSheet } from 'react-native';

const LoginScreen = () => {
  const [passwordVisible, setPasswordVisible] = useState(false);
  const [account, setAccount] = useState('');
  const [password, setPassword] = useState('');

  return (
    <View style={styles.pageContainer}>
      {/* 账号输入框 */}
      <View style={styles.inputBox}>
        <TextInput
          style={styles.inputContent}
          placeholder="请输入账号"
          value={account}
          onChangeText={setAccount}
          autoCapitalize="none"
        />
      </View>

      {/* 密码输入框 */}
      <View style={styles.inputBox}>
        <TextInput
          style={styles.inputContent}
          placeholder="请输入密码"
          value={password}
          onChangeText={setPassword}
          secureTextEntry={!passwordVisible}
        />
        <TouchableOpacity 
          onPress={() => setPasswordVisible(!passwordVisible)}
          style={styles.pwdToggle}
        >
          <Text style={styles.pwdToggleText}>{passwordVisible ? '隐藏' : '显示'}</Text>
        </TouchableOpacity>
      </View>

      {/* 登录主按钮 */}
      <TouchableOpacity style={styles.primaryBtn}>
        <Text style={styles.primaryBtnText}>登录</Text>
      </TouchableOpacity>

      {/* 次要操作按钮 */}
      <TouchableOpacity style={styles.textBtn}>
        <Text style={styles.textBtnText}>忘记密码？</Text>
      </TouchableOpacity>
    </View>
  );
};

const styles = StyleSheet.create({
  pageContainer: {
    flex: 1,
    paddingHorizontal: 24,
    paddingTop: 120,
    backgroundColor: '#ffffff',
  },
  inputBox: {
    flexDirection: 'row',
    alignItems: 'center',
    height: 48,
    marginBottom: 16,
    paddingHorizontal: 16,
    borderRadius: 8,
    borderWidth: 1,
    borderColor: '#eeeeee',
    backgroundColor: '#ffffff',
    // 阴影效果适配iOS和安卓
    shadowColor: '#000000',
    shadowOffset: { width: 0, height: 2 },
    shadowOpacity: 0.06,
    shadowRadius: 6,
    elevation: 2,
  },
  inputContent: {
    flex: 1,
    fontSize: 14,
    color: '#333333',
  },
  pwdToggle: {
    paddingLeft: 12,
  },
  pwdToggleText: {
    fontSize: 13,
    color: '#666666',
  },
  primaryBtn: {
    height: 48,
    borderRadius: 8,
    backgroundColor: '#1677ff',
    alignItems: 'center',
    justifyContent: 'center',
    marginTop: 8,
    marginBottom: 24,
    shadowColor: '#1677ff',
    shadowOffset: { width: 0, height: 4 },
    shadowOpacity: 0.2,
    shadowRadius: 8,
    elevation: 4,
  },
  primaryBtnText: {
    fontSize: 16,
    color: '#ffffff',
    fontWeight: '600',
  },
  textBtn: {
    alignItems: 'center',
  },
  textBtnText: {
    fontSize: 14,
    color: '#1677ff',
  },
});

export default LoginScreen;

调整提示 #

如果需要添加输入框左侧图标，直接在inputBox容器内的TextInput前插入图标组件，同时给inputContent加paddingLeft: 10留出图标位置即可，图标可以使用本地图片资源或者第三方图标库实现。
颜色、圆角、阴影参数都可以根据实际的设计稿调整，只要保持各组件的样式参数统一，就能还原设计稿的视觉效果。

内容的提问来源于stack exchange，提问作者Keshav Khetan