Question

我正在开发React Native应用。我使用alert创建了自己的自定义component作为modal。使用它时，我总是需要在alert函数中添加render()组件。

是否可以使用自定义警报而不在我的render()函数中呈现它？

我的意思是，我可以将Alert中的react-native称为Alert.alert()。我也想使用自己的自定义提醒。

我该怎么做？

Answer 1

Alert.alert()调用本机代码。如果要显示自定义警报组件，则需要将其添加到渲染方法中。将其放在您的根目录或其他父组件中最简单。

设置要有条件显示的组件。创建一个方法来设置条件。您可以将此方法传递给子组件。

this.alertToggle = (displayAlert) => this.setState({displayAlert});

render(){
  return (
      <Parent>
        {this.state.displayAlert && <CustomAlert/>}
        <Child alertToggle={this.alertToggle}
      </Parent>
    )
}

您可以调用this.props.alertToggle(true)在父级中显示警报组件。

编辑：由于使用模态制作了组件，因此可以将显示布尔值传递给CustomAlert组件，并在组件内触发模态。 <CustomAlert displayAlert={this.state.displayAlert} /> 将自定义警报放在父级中的想法是相同的。

Answer 2

将方法设为静态。

class MyCustomAlert extends React.Component {
  static alert () {
  }
}

用法

import MyCustomAlert from './MyCustomAlert';

MyCustomAlert.alert()

Answer 3

您还可以使用此API react-native-popup-dialog来设计警报。

过时的我做了类似的事情：

  ...
  <Dialog
  visible={this.props.visible}>
    <DialogContent>
      <View style={ container }>
        <Text style={ title }> { this.props.title } </Text>
        <Text style={ text }> { this.props.text } </Text>
        <View style={ buttonView }>
          <TouchableOpacity style={ button } onPress={ this.props.validationAction }>
            <Text style={ buttonText }>{ this.props.validationText }</Text>
          </TouchableOpacity>
        </View>
      </View>
    </DialogContent>
  </Dialog>
  ...

还有父母：

<Alert
visible={ this.state.visible }
title={ "Alert title" }
text={ "This is an custom alert." }
validationText={ "OK" }
validationAction={ () =>  {
  this.setState({ visible: false });
}} />

我希望它会有所帮助。

Answer 4

您可以这样做

class SomeComponent extends Component {
  static myComponentInstance

  constructor(props) {
    super(props)

    this.state = {
      visible: false,
      text: ""
    }

    SomeComponent.myComponentInstance = this
  }

  static show(text) {
    this.myComponentInstance._show(text)
  }


  _show(text) {
    this.setState({ visible: true, text })
  }

  render(){

    <Modal visible={this.state.visible}>
       <Text>{this.state.text}</Text>
    </Modal>
  }
}

const AppRoot = () => (
  <View>
    <Navigator />
    <SomeComponent/>
  </View>
)

要显示它，您可以在任何地方SomeComponent.show("some text")

Answer 5

据我了解，您希望以无状态方式处理模态。遗憾的是，如果不渲染Modal，就无法做到这一点，但是您可以通过在应用程序调用中附加一个虚拟div并通过render来操纵其dom，从而将其与应用程序渲染树分开。

function modalHandler(CustomModal) {
  const div = document.createElement("div");
  this.hide = () => {
    ReactDOM.unmountComponentAtNode(div);
    div.remove();
  };
  this.show = props => {
    document.body.appendChild(div);
    ReactDOM.render(<CustomModal onRequestClose={this.hide} {...props} />, div);
  };

  return {
    show: this.show,
    hide: this.hide,
  };
}

然后使用处理程序为模态创建实例：

const myModal = new modalHandler(CustomModal);

然后，您可以在任何喜欢的地方使用呼叫，而不会弄乱应用程序的渲染树：

myModal.show()
myModal.hide()

示例：

const modalStyle = { content: { top: '50%',left: '50%', right: 'auto', bottom: 'auto', marginRight: '-50%', transform: 'translate(-50%, -50%)'}};

const CustomModal = ({ onRequestClose, ...props }) => (
  <ReactModal {...props} isOpen={true} contentLabel="CustomModal" >
    <h1>This modal will close in 3 seconds</h1>
    <button onClick={onRequestClose}>Close</button>
  </ReactModal>
);

// Create Stateless Modal handler from component with HOF
function modalHandler(CustomModal) {
  const div = document.createElement("div");
  this.callOnHide = () => {};
  this.callOnShow = () => {};
  this.hide = () => {
  	this.callOnHide();
    ReactDOM.unmountComponentAtNode(div);
    div.remove();
  };
  this.show = props => {
  	this.callOnShow();
    document.body.appendChild(div);
    ReactDOM.render(<CustomModal onRequestClose={this.hide} {...props} />, div);
  };

  return {
    show: this.show,
    hide: this.hide,
    setOnHideCallback: callback => {
      this.callOnHide = callback;
    },
    setOnShowCallback: callback => {
      this.callOnShow = callback;
    }
  };
}

// Create instance from modal component
const myModal = new modalHandler(CustomModal);

class View extends React.Component {
  openModalHandler = () => {
    myModal.show();

    // auto close in 3 second
    const timer = setTimeout(() => {
      myModal.hide();
    }, 3000);

		// clear the timeout onHide
    myModal.setOnHideCallback(()=>{
    	clearTimeout(timer)
    })
  };

  render() {
    return (
      <div>
        <button onClick={this.openModalHandler}>Open modal</button>
      </div>
    );
  }
}

ReactDOM.render(<View />, document.getElementById("root"));

<script src="https://unpkg.com/react@0.14.0/dist/react-with-addons.js">
</script>
<script src="https://unpkg.com/react-dom@0.14.0/dist/react-dom.js">
</script>
<script src="https://unpkg.com/react-modal@1.6.2/dist/react-modal.min.js">
</script>

<div id="root">
</div>

如何调用React Native自定义警报作为函数？

5 个答案: