将道具传递给React-Native-Modal

Question

我在用react-native-modal。是否可以将像图像地址这样的道具传递给模态？我检查了一下，但找不到任何文档。

Answer 1

看起来你需要给它传递一个子组件才能让它呈现。因此，您需要构建一个类似normal的组件，然后将其传递给Modal组件以进行呈现。从他们的documentation

render() {
    return (
    <View style={{ flex: 1 }}>
      <TouchableOpacity onPress={this._toggleModal}>
        <Text>Show Modal</Text>
      </TouchableOpacity>
      <Modal isVisible={this.state.isModalVisible}>
        <View style={{ flex: 1 }}>
          <Text>Hello!</Text>
          <TouchableOpacity onPress={this._toggleModal}>
            <Text>Hide me!</Text>
          </TouchableOpacity>
        </View>
      </Modal>
    </View>
  );
}

因此，您可能希望将<Image src={your_url} />与其他任何您希望使用modal标记显示的内容一起包装。或者，您可以通过其子prop将整个组件传递给Modal：

render() {
  return (
    <Modal children={<YourCustomComponent {...props} />} />
  )
}

Answer 2

只需用自定义组件包装您的Modal，并让modal渲染一个作为道具传递的图像。当相应的图像被按下时，将visibility设置为true，并且模式将与该图像一起弹出。