react native - 如何将参数从一个组件传递到另一个组件？

Question

我有 2 个屏幕， 一个带有图像选择器和上传功能，另一个带有地图和标记，

我的目标是添加带有照片的标记，并将该照片参考放在我在 firebase 中的标记集合中。

到目前为止，我设法将标记 latlng，

我在地图屏幕内使用模式：在模式内我调用图像选择器，一旦我上传照片并使用：

//inside UploadScreen ~~~
const urlRef =  storage()
            .ref(filename)
            .getDownloadURL();
            console.log('url: ', urlRef)

我需要那个 urlRef 出现在我的其他屏幕模式中。

  <Modal
       isVisible
       transparent
       onBackButtonPress={() => this.setState({ activeModal: null })}
       onBackdropPress={() => this.setState({ activeModal: null })}
      >
        
        <View style={styles.modalView}>
        <UploadScreen />  
        <TouchableOpacity onPress={()=>this.setState({activeModal: null})}>
          <Text> Close</Text>
        </TouchableOpacity>
        <TouchableOpacity onPress={() =>this._addMarker()}> //this adds the marker latlng
          <Text>add marker</Text>
        </TouchableOpacity>
        
        </View>
      </Modal>

在我的地图屏幕上，我调用 <UploadImage/> 来加载该上传图像组件，上传完成后，我得到了需要放入我地图屏幕中的标记集合中的 urlRef。

 _addMarker() {
    console.log('marker cords?: ', this.state.marker)
    console.log('marker cords?: ', this.state.marker.longitude)
    markerRef.add({
      longitude: this.state.marker.longitude,
      latitude: this.state.marker.latitude,
      email: this.state.userEmail,
      imageUri: "will be image uri"
      
    })

  }

请给我一些指导，我不确定那里是否需要道具或其他东西。

欢迎任何建议或帮助。

提前致谢

Answer 1

通常，React 中的通信流程是自上而下的。这意味着父母将一些道具传递给孩子，然后孩子反过来用这些道具做一些事情。

但是，显然可以按照您想要的方式进行操作。为此，最简单的方法是在您的模态中使用useState 创建一个状态。然后，您将 setter 传递给子项，当子项中的值被填充时，您将其传回给父项。

在代码中它看起来像这样：

Modal.js (parent)

const [childUrlRef, setChildUrlRef] = useState(null);

<Modal
  isVisible
  transparent
  onBackButtonPress={() => this.setState({ activeModal: null })}
  onBackdropPress={() => this.setState({ activeModal: null })}
 >
        
   <View style={styles.modalView}>
   <UploadScreen setChildUrlRef={setChildUrlRef} />  
   ...
 </Modal>

UploadScreen (child)

当您在孩子中获得您的价值时，将其设置为状态以确保 React 看到它，然后将其传递给您的父母。

const [url, setUrl] = useState(null);

useEffect(() => {
  if (url) props.setChildUrlRef(url);
}, [url])

...

const urlRef =  storage()
.ref(filename)
.getDownloadURL();
console.log('url: ', urlRef)

setUrl(urlRef);
    ...

所以你得到你的变量，将它设置为本地状态，然后让 useEffect 监视该变量的变化，一旦检测到变化，useEffect 就会被触发并通过状态设置器在你的父级中设置值通过道具。

如果您需要在没有直接关系的组件之间传递数据，请考虑使用Redux 或React Context。

编辑：我刚刚看到您的 Modal 不起作用。如果你不能重构它，你仍然可以将一个函数传递给孩子，它会在你的父母内部触发setState。