Question

我有一个Router.js来设置所有组件的反应导航。

当我单击组件FloorScreen headerRight按钮时，将显示点击警报。

现在我想像this.props.navigation.navigate.goBack();

那样更改它

Router.js：

import React, { Component } from 'react';
import { Image, TouchableOpacity } from 'react-native';
import { createStackNavigator, createAppContainer } from 'react-navigation';

// and import some screen...

    const Router = createStackNavigator({
      WelcomeScreen: {
        screen: WelcomeScreen,
        navigationOptions: () => ({
          header: null
        }),
      },
      HomeScreen: {
        screen: HomeScreen
      },
      FloorScreen: {
        screen: FloorScreen,
        navigationOptions: {
          drawerLabel: 'test',
          headerStyle: {
            backgroundColor: commonColor.appBackgroundColor,
          },
          headerRight: (
            <TouchableOpacity onPress={() => alert('click')}>
            <Image style={{ width: 20, height: 20}} source={BackIcon} />
            </TouchableOpacity>
          )
        }
      }
    },
    {
      initialRouteName: 'WelcomeScreen',
      headerMode: 'screen'
    });

    export default createAppContainer(Router);

我知道我可以在FloorScreen.js中设置代码来实现它：

static navigationOptions = ({ navigation }) => ({
        headerRight : (
            <TouchableOpacity onPress={() => { navigation.goBack() }}>  
               <Image />
            </TouchableOpacity>
        ),
    });

是否可以在Router.js中设置代码？还是在FloorScreen.js中设置代码是唯一的方法？

任何帮助将不胜感激。

Answer 1

您可以在navigationOption

上实现它

navigationOptions: () => ({
              tabBarLabel: strings.labelJobs,
              tabBarIcon: ({ tintColor }) => (
                <Icon type="FontAwesome" name="someName" />
              ),
              tabBarOnPress: ({ navigation, defaultHandler }) => {
                if (navigation.state.index > 0) {
                  navigation.dispatch(StackActions.popToTop());
                }
                defaultHandler();
              }
            })

以上内容旨在演示如何显示堆栈的第一个屏幕，只是向您展示如何在navigation中访问navigationOptions

React Navigation（V3）：如何在自定义路由器文件中设置导航功能？

1 个答案: