如何从嵌套屏幕传递函数

Question

我在 navigator 中有 2 个嵌套屏幕，我希望使用其中一个屏幕到另一个屏幕（从 Screen1.js 到 Screen2.js）的功能。我要在Screen2.js中调用的函数是addList()。这是 Screen1.js

export default function Screen1({navigation}){
   //...

  function addList (list){
   //Code...
   };

  //...
}

我尝试导入函数 addList 并在 Screen2 中像这样使用它：

import addList from './Screen1

//...

export default function Screen2({navigation}){
  //...

  function createSomething(){
    //...   
    addList(list);
    //...         
  }

  //...
}

但是，我的尝试没有成功。我该怎么做才能做到这一点？

Answer 1

addList 应该在父组件中。这样你就可以在 screen1 和 screen2 中将函数作为道具传递。

Answer 2

使用钩子和函数组件

import React, { useState, useEffect, useRef, useImperativeHandle, forwardRef } from 'react'

    const { forwardRef, useRef, useImperativeHandle } = React;
        
        // We need to wrap component in `forwardRef` in order to gain
        // access to the ref object that is assigned using the `ref` prop.
        // This ref is passed as the second parameter to the function component.
        const Child = forwardRef((props, ref) => {
        
          // The component instance will be extended
          // with whatever you return from the callback passed
          // as the second argument
          useImperativeHandle(ref, () => ({
        
            getAlert() {
              alert("getAlert from Child");
            }
        
          }));
        
          return <h1>Hi</h1>;
        });
        
        const Parent = () => {
          // In order to gain access to the child component instance,
          // you need to assign it to a `ref`, so we call `useRef()` to get one
          const childRef = useRef();
        
          return (
            <div>
              <Child ref={childRef} />
              <button onClick={() => childRef.current.getAlert()}>Click</button>
            </div>
          );
        };
        
        ReactDOM.render(
          <Parent />,
          document.getElementById('root')
        );

Answer 3

如果我用 Ajmal 解决方案做你想做的，我认为应该是：

import React, { useState, useEffect, useRef, useImperativeHandle, forwardRef } from 'react'

const { forwardRef, useRef, useImperativeHandle } = React;
    
    // We need to wrap component in `forwardRef` in order to gain
    // access to the ref object that is assigned using the `ref` prop.
    // This ref is passed as the second parameter to the function component.
    const Screen1 = forwardRef((props, ref) => {
    
      // The component instance will be extended
      // with whatever you return from the callback passed
      // as the second argument
      useImperativeHandle(ref, () => ({
    
        addList() {
          alert("getAlert from Child");
        }
    
      }));
    
      return <h1>Hi</h1>;
    });

    const Screen2 = (props) => {
      return (
       <div>
         ....
         <button onClick={(e) => props.screen1Ref.addlist(...)}>addList</button>
       </div>
      )
    }
    
    const Parent = () => {
      // In order to gain access to the child component instance,
      // you need to assign it to a `ref`, so we call `useRef()` to get one
      const screen1Ref = useRef();
    
      return (
        <div>
          <Screen1 ref={screen1Ref} />
          <Screen2 screen1Ref={screen1Ref} />
        </div>
      );
    };
    
    ReactDOM.render(
      <Parent />,
      document.getElementById('root')
    );

现在，您可以在 screen2 中调用道具。screen1Ref.addList(...)

如何从嵌套屏幕传递函数

How to pass a function from nested screens

navigation

function

reactjs

react-native

react-native-navigation