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

Question

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

有没有什么方法可以使用自定义警报而不用在我的 render() 函数中渲染它？

我的意思是，我可以在 react-native 中使用 Alert，方法是将其称为 Alert.alert()。我也想像那样使用我自己的自定义警报。

我该怎么做？

Answer 1

你可以这样做

class SomeComponent extends Component {
  static myComponentInstance

  constructor(props) {
    super(props)

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

    SomeComponent.myComponentInstance = this
  }

  static show(text) {
    SomeComponent.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")