如何添加文本输入以在React Native中发出警报

Question

有人可以帮助将文本输入添加到React Native中的警报中。是否可以？我搜索并找到了处理多个线条文本输入的结果，而我并非如此。预先感谢

Answer 1

这是可能的。我相信这仅适用于Alertios，但是它似乎已经相互作用以反应本机警报。

编辑：尽管添加了警报，但它似乎对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.log("Cancel Pressed"),
          style: "cancel"
        },
        {
          text: "OK",
          onPress: password => console.log("OK Pressed, password: " + password)
        }
      ],
      "secure-text"
    );
  };
}

更多详细信息：https：//reaectnative.dev/docs/alertios

Answer 2

使用 react-native-dialog它在平台上工作，并且很简单。

Answer 3

您无法根据文档在警报组件中添加文本输入，您需要自己创建一个自定义组件才能实现这一目标，例如：使用自定义模态或使用反应 - 简单二元格

Answer 4

没办法只需使用自定义模式或第三方库即可实现这一目标...

Answer 5

这是使用自定义模式的扰流板：

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={handleChangePassword}
        />
      )}

Answer 6

如果您认为片刻，您会发现警报和模态都是一种弹出组件。这会导致您创建自己的弹出组件，而不是使用现成的组件。

return (
  <Modal
    animationType="slide"
    transparent={true}
    onBackdropPress={() => console.log('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>
);