我正在尝试通过在React Native的顶级组件中实现此模式来创建可全局访问的模式。为此,我尝试使用回调函数扩展SwitchNavigator(基于此link),并使其通过导航道具可访问,但子组件似乎无法访问该回调。如何使所有子组件都可以访问回调?
我当前的导航结构可以如下所示(假设我尝试从Leaf Component访问回调):
下面的代码片段显示了我当前的逻辑。
在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
})
答案 0 :(得分:0)
您可以使用screenProps
将属性向下传递到所有屏幕:
<SwitchNavigatorComponent
navigation={navigation}
screenProps={{presentModal: this.presentModal}} />
然后每个屏幕都可以通过this.props.screenProps.presentModal
访问模式。
有关更多详细信息,请参见documentation