反应导航:如何从导航中的自定义标题调用主页内的方法

时间:2020-01-11 11:19:24

标签: react-native react-native-android react-navigation

我已经创建了createMaterialTopTabNavigator

const topSurvayorsNavigator = createMaterialTopTabNavigator({
    ActiveSurveyor: {
        screen: MomayezanScreen,
        params: { status: 1 },
    },
    DeActiveSurveyor: {
        screen: MomayezanScreen,
        params: { status: 0 },
    }
}, {
    swipeEnabled: true,
    tabBarOptions: {
        labelStyle: {
            fontSize: 12
        },
        activeTintColor: Colors.darkGray
    }
});

我将此导航器添加到了堆栈导航中:

const AuditMomayezanNavigator = createStackNavigator({
    Dashboard: DashboardScreen,
    ListSurveyor: {
        screen: topSurvayorsNavigator,
        navigationOptions: ({ navigation }) => {
            switch (navigation.state.routes[navigation.state.index]["routeName"]) {
                case "ActiveSurveyor":
                    console.log("ActiveSurveyor")
                    return {
                        header: () => <CustomHeader
                            title='page1' 
                            onTermSubmit={() => searchApi(0)}
                            />
                    }

                case "DeActiveSurveyor":
                    console.log("DeActiveSurveyor")
                    return {
                        header: () => <CustomHeader
                            title='page2' 
                            onTermSubmit={() => searchApi(1)}
                            />
                    }
                default:
                    return { title: (navigation.state.routes[navigation.state.index]["routes"])[(navigation.state.routes[navigation.state.index]["index"])].routeName }
            }
        }
    },
    Detail: SurveyorDetailsScreen,
}, {
    defaultNavigationOptions: defaultNavOptions
});

如您所见,我使用自定义标头进行堆栈导航:

header: () => <CustomHeader
                  title='page1' 
                  onTermSubmit={() => searchApi(1)}
                  />

在自定义视图中,我必须发送带有参数的searchApi之类的onTermSubmit属性方法。如何从导航器调用MomayezanScreen页面内的searchApi(number)?

1 个答案:

答案 0 :(得分:0)

https://reactnavigation.org/docs/en/header-buttons.html 请参阅 标头与组件的交互