Question

我正在尝试通过在React Native的顶级组件中实现此模式来创建可全局访问的模式。为此，我尝试使用回调函数扩展SwitchNavigator（基于此link），并使其通过导航道具可访问，但子组件似乎无法访问该回调。如何使所有子组件都可以访问回调？

我当前的导航结构可以如下所示（假设我尝试从Leaf Component访问回调）：

ExtendedSwitchNavigator
- MyTabNavigator
  - Stack Navigator（选项卡1）
    - 叶成分
  - 标签2
  - 标签3
- OtherComponent

下面的代码片段显示了我当前的逻辑。

在App.js中：

const SwitchNavigatorComponent = createSwitchNavigator({
  TabNavigator: MyTabNavigator,
  OtherComponent: MyOtherComponent
})

// Extending the Switch Navigator component 
class ExtendedSwitchNavigator extends Component {
  static router = SwitchNavigatorComponent.router;
  componentDidMount(){
    this.setState({
      modalVisible: false
    })
  }
  presentModal = (status) => {
      this.setState({modalVisible: {status}});
  }
  render(){
    const { navigation } = this.props;
    return(
      <SwitchNavigatorComponent
      navigation={navigation}
      presentModal={this.presentModal} />

     ... (conditionally render modal)
    )
  }
}

const App = createAppContainer(ExtendedSwitchNavigator);
export default App;

叶成分：

export default class LeafComponent extends Component {

  constructor(props) {
      super(props);
      console.log(this.props)
  }

  componentDidMount() {
    this.props.presentModal(true);
  }
}

尝试使用this.props.presentModal(true)访问回调时，出现错误

this.props.presentModal不是函数。（在“ this.props.presentModal（true）”中，“ this.props.presentModal”未定义）

当我在叶子组件的构造函数中打印props时，我得到了

 Object {
   "navigation": Object {
     "actions": Object {
       "dismiss": [Function dismiss],
       "goBack": [Function goBack],
       "navigate": [Function navigate],
       "pop": [Function pop],
       "popToTop": [Function popToTop],
       "push": [Function push],
       "replace": [Function replace],
       "reset": [Function reset],
       "setParams": [Function setParams],
     },
     "addListener": [Function addListener],
     "dangerouslyGetParent": [Function anonymous],
     "dismiss": [Function anonymous],
     "dispatch": [Function anonymous],
     "emit": [Function emit],
     "getChildNavigation": [Function getChildNavigation],
     "getParam": [Function anonymous],
     "getScreenProps": [Function anonymous],
     "goBack": [Function anonymous],
     "isFocused": [Function isFocused],
     "navigate": [Function anonymous],
     "pop": [Function anonymous],
     "popToTop": [Function anonymous],
     "push": [Function anonymous],
     "replace": [Function anonymous],
     "reset": [Function anonymous],
     "router": undefined,
     "setParams": [Function anonymous],
     "state": Object {
       "key": "...",
       "routeName": "Leaf1",
     },
   },
   "screenProps": undefined,
 }

其中不包含有关presentModal的任何内容。

[更新] 根据@GaëlS的请求，这是ExtendedSwitchNavigator和Leaf之间的组件。

const Tab1StackNavigator = createStackNavigator({
  LeafComponent: LeafComponent
})

const MyTabNavigator = createBottomTabNavigator({
  Tab1: Tab1StackNavigator,
  Tab2: Tab2Screen,
  Tab3: Tab3Screen
  })

Answer 1

您可以使用screenProps将属性向下传递到所有屏幕：

<SwitchNavigatorComponent
  navigation={navigation}
  screenProps={{presentModal: this.presentModal}} />

然后每个屏幕都可以通过this.props.screenProps.presentModal访问模式。

有关更多详细信息，请参见documentation

在嵌套的子组件中访问父回调函数

1 个答案: