时间戳

首页 > 解决方案 > React Native AlertIOS 占位符

javascript - React Native AlertIOS 占位符

问题描述

我正在使用带有输入 的AlertIOS ：在此处输入图像描述

AlertIOS.prompt(
  'Reset password',
  'Please enter your email in order to reset your password.',
  [
    {
      text: 'Cancel',
      onPress: () => console.log('Cancel Pressed'),
      style: 'cancel',
    },
    {
      text: 'Continue',
      onPress: (password) => console.log('OK Pressed, password: ' + password),
    },
  ],
  'plain-text',
  '',
  'email-address'
);

我希望在该警报中为 TextInput 添加一个占位符。这可能吗？我知道有一个默认值选项，但是我希望有一个占位符来代替它。

标签： javascriptreact-native

解决方案

从技术上讲，在 iOS 中是可能的，在 react-native 中可能吗？目前的简短回答是否定的。

不可能的原因是 TextField 的占位符属性尚未暴露给 react-native 端。如果我们查看 st 中的代码，RCTAlertManager.m我们可以看到为and选项placeholder设置了默认值，但是无法设置选项的默认值PasswordLoginplain-text

https://github.com/facebook/react-native/blob/master/React/Modules/RCTAlertManager.m

switch (type) {
    case RCTAlertViewStylePlainTextInput: {
      [alertController addTextFieldWithConfigurationHandler:^(UITextField *textField) {
        textField.secureTextEntry = NO;
        textField.text = defaultValue;
        textField.keyboardType = keyboardType;
      }];
      break;
    }
    case RCTAlertViewStyleSecureTextInput: {
      [alertController addTextFieldWithConfigurationHandler:^(UITextField *textField) {
        textField.placeholder = RCTUIKitLocalizedString(@"Password");
        textField.secureTextEntry = YES;
        textField.text = defaultValue;
        textField.keyboardType = keyboardType;
      }];
      break;
    }
    case RCTAlertViewStyleLoginAndPasswordInput: {
      [alertController addTextFieldWithConfigurationHandler:^(UITextField *textField) {
        textField.placeholder = RCTUIKitLocalizedString(@"Login");
        textField.text = defaultValue;
        textField.keyboardType = keyboardType;
      }];
      [alertController addTextFieldWithConfigurationHandler:^(UITextField *textField) {
        textField.placeholder = RCTUIKitLocalizedString(@"Password");
        textField.secureTextEntry = YES;
      }];
      break;
    }
    case RCTAlertViewStyleDefault:
      break;
  }

完成这项工作的唯一方法是找到一个能够placeholder在TextInput. Alert或者您可以根据RCTAlertManager.m允许您设置placeholder

推荐阅读