如何使用react-native-paper更改TextInput样式并通过onblur关闭键盘

Question

我使用react-native纸张，我需要帮助...我想知道如何拒绝键盘以及如何在onblur处于活动状态时停用OnFocus

    import { View, StyleSheet } from 'react-native';
    import { TextInput } from 'react-native-paper';
    const Input = () => {
          return (
            <TextInput
              style={styles.inputField}
              label='Email'
              mode='outlined'
            />
        );
    };
    
    const styles = StyleSheet.create({
      inputField: {
        width: '100%',
      }
    })
    
    export default Input;

Answer 1

可以借助useState来实现，以下代码供参考：

const [emailError, setEmailError] = useState('');
const [passwordError, setPasswordError] = useState('');
const [focusedInput, setFocusedInput] = useState('');
    <TextInput
        style={[
          styles.input,
          focusedInput === 'email' && styles.inputFocused,
          emailError && styles.inputError,
          {
            backgroundColor: isDarkTheme
              ? secondaryDarkColor
              : secondaryLightColor,
            marginVertical: 20,
            color: isDarkTheme ? 'white' : 'black',
          },
        ]}
        placeholder="Email"
        keyboardType="email-address"
        placeholderTextColor={secondaryTextColor}
        value={email}
        onFocus={() => setFocusedInput('email')}
        onBlur={() => setFocusedInput('')}
        onChangeText={text => {
          setEmail(text);
          setEmailError('');
        }}
      />