Javascript 带有文本输入的自定义对话框

我刚开始使用react native，希望开发一个带有文本输入的自定义对话框，基本上类似于提示符，但它应该可以与android和ios一起使用。react本机文档中当前提供的版本仅适用于ios。实现此实现的方法有哪些？

您可以为此使用多个库，但如果您想使用现成的组件来实现此功能，可以使用来自React Native并对其进行自定义

你可以创建这样的东西

const ModalInput = ({ onTextChange, onSubmit, visible, value, toggle }) => {
  return (
    <Modal visible={visible} transparent={true} style={{justifyContent:'center'}}>
      <View
        style={{
          height: 100,
          padding: 20,
          width: '80%',
          alignSelf: 'center',
          justifyContent: 'center',
          backgroundColor: 'white',
        }}>
        <TextInput
          value={value}
          onChangeText={onTextChange}
          placeholder={'Enter text'}
        />
        <View style={{ flexDirection: 'row', alignSelf: 'center' }}>
          <Button title="close" onPress={toggle} />
          <Button title="ok" onPress={onSubmit} />
        </View>
      </View>
    </Modal>
  );
};

用法如下所示

  <ModalInput
    visible={visible}
    value={text}
    onTextChange={onTextChange}
    toggle={() => setVisible(!visible)}
    onSubmit={() => setVisible(!visible)}
  />

setVisible（！visible）}
onSubmit={（）=>setVisible（！visible）}
/>

我已经做了一个非常基本的样式，你可以根据自己的要求进行样式设置，甚至在按下ok按钮时传递文本，你可以完全控制它，因为它将是你的控件，并且可以按照你喜欢的方式进行样式设置

如果你想有一个覆盖背景检查这个答案

如果你想测试它，你可以使用零食（切换到Andriod或IOS）

---

创建一个模式。。然后把你想要的任何东西都放进去。谢谢，你能推荐一些提供此功能的库吗？还有，当对话框显示时，我如何模糊背景？这是一个很好的库。作为背景，你可以使用和我提供的答案相同的方法。使用包装器视图

  <ModalInput
    visible={visible}
    value={text}
    onTextChange={onTextChange}
    toggle={() => setVisible(!visible)}
    onSubmit={() => setVisible(!visible)}
  />