Как добавить ввод текста для оповещения в React Native

Вы не можете добавить текстовый ввод в компонент оповещения в соответствии с документация. Для этого вам нужно будет создать собственный компонент самостоятельно, например: используйте модальное окно настройки или используйте реагировать-родные-простые-диалоги.

Это возможно. Я считаю, что изначально это было доступно только для AlertIOS, однако, похоже, оно было интегрировано в React Native Alert.

Обновлено: хотя он добавлен в Alert, он, похоже, не работает для Android.

Использовать

import { Alert } from 'react-native'; 

onButtonPress = () => {
    Alert.prompt(
      "Enter password",
      "Enter your password to claim your $1.5B in lottery winnings",
      [
        {
          text: "Cancel",
          onPress: () => console.info("Cancel Pressed"),
          style: "cancel"
        },
        {
          text: "OK",
          onPress: password => console.info("OK Pressed, password: " + password)
        }
      ],
      "secure-text"
    );
  };
}

Подробнее: https://reactnative.dev/docs/alertios

Ни за что Просто используйте пользовательскую модальную или стороннюю библиотеку для достижения этой цели...

Вы можете достичь этого через «Modal».

Используйте react-native-dialog, он работает на разных платформах и достаточно прост.

Если вы на мгновение задумаетесь, то обнаружите, что и предупреждение, и модальное окно являются своего рода всплывающими компонентами. И это заставляет вас создавать свой собственный всплывающий компонент вместо использования готового, если у вас его нет.

return (
  <Modal
    animationType = "slide"
    transparent = {true}
    onBackdropPress = {() => console.info('Pressed')}
    visible = {props.modalVisible}
    onRequestClose = {ResetValues}>
    <View
      style = {{
        position: 'absolute',
        bottom: 0,
        right: 0,
        backgroundColor: '#4D4D4D',
        width: (windowWidth * 100) / 100,
        height: (windowHeight * 100) / 100,
      }}>
      
     !!!!!!!!! your elements here like text,input,buttons and etc....!!!!!

    </View>
  </Modal>
);

Вот спойлер с использованием пользовательского модала:

import React, { FC } from 'react'
import { View, TextInput, Modal, GestureResponderEvent } from 'react-native';
import { BoldText, IOSButton } from '..';
import { colors } from '../../constants';

import { customModalStyles, defaultStyles } from '../../styles';

interface Props {
  modalVisible: boolean;
  // onRequestClose,
  textOne: string;
  buttonOneTitle: string;
  onPressOne: (event: GestureResponderEvent) => void;
  value: string,
  onChangeText: (text: string) => void;,
  placeholder: string
}

const InputModal: FC<Props> = ({
  modalVisible,
  // onRequestClose,
  textOne,
  buttonOneTitle,
  onPressOne,
  value,
  onChangeText,
  placeholder
}) => {

  return (
    <Modal
      animationType = "fade"
      transparent = {true}
      visible = {modalVisible}
    // onRequestClose = {onRequestClose}
    >
      <View style = {customModalStyles.centeredView}>
        <View style = {customModalStyles.modalView}>
          <BoldText
            style = {customModalStyles.textSize}>{textOne}
          </BoldText>

          <TextInput
            secureTextEntry
            autoCapitalize = "none"
            style = {[
              defaultStyles.inputStyle,
              defaultStyles.textInputShadow,
            ]}
            value = {value}
            onChangeText = {onChangeText}
            placeholder = {placeholder}
            placeholderTextColor = {colors.placeHolder}
          />
          <IOSButton title = {buttonOneTitle}
            onPress = {onPressOne}
          />
        </View>
      </View>
    </Modal>
  )
}

export default InputModal;

И стили:

import { StyleSheet } from 'react-native';
import { colors } from '../constants';
import styleConstants from './styleConstants';

const customModalStyles = StyleSheet.create({
  buttonsContainer: {
    flexDirection: 'row',
    justifyContent: 'space-between',
  },
  centeredView: {
    flex: 1,
    justifyContent: 'flex-end',
    alignItems: 'center',
    marginBottom: 20,
  },
  modalView: {
    justifyContent: 'space-around',
    alignItems: 'center',
    width: styleConstants.width < 1000 ? 320 : 400,
    height: styleConstants.height < 1000 ? 320 : 400,
    backgroundColor: colors.primary,
    borderRadius: 20,
    paddingHorizontal: 15,
    paddingTop: 10,
    shadowColor: colors.secondary,
    shadowOffset: {
      width: 0,
      height: 4,
    },
    shadowOpacity: 0.55,
    shadowRadius: 8,
    elevation: 20,
  },
  textSize: {
    textAlign: 'center',
    fontSize: styleConstants.fontSizeSM,
  },
});

export default customModalStyles;

Тогда можно использовать его следующим образом:

{modalVisible && (
        <InputModal
          modalVisible = {modalVisible}
          textOne = {`...`}
          buttonOneTitle = "..."
          onPressOne = {async () => {
            setModalVisible(false);
            validatePasswordEtc()
          }}
          placeholder = "..."
          value = {password}
          onChangeText = {handleChangeEventPassword}
        />
      )}