1

我定义了一个routes.js文件，其中创建了抽屉导航中的所有路线。除了在一种情况下，这工作正常。我有一个这样的 StackNavigator：

const ChatScreens = createStackNavigator(
  {
    Chat: {
      screen: Chat,
    },
    Transactions: {
      screen: Transactions,
      navigationOptions: {
        headerLeft: (
          <MaterialIcons
            name="chat"
            size={24}
            style={{ color: colors.BLACK, marginLeft: 10 }}
            onPress={() => navigation.popToTop()} //not working
          />
        ),
      }
    },
    Logout: {
      screen: AuthLoadingScreen,
    },
  },
  {
    mode: 'card',
    initialRouteName: 'Chat',
    navigationOptions: {
      drawerIcon: getDrawerItemIcon('chat'),
    }
  },
);

如果删除此代码，将呈现一个可以正常工作的默认“< Back”箭头。但是，我想使用该图标。我尝试在我的Transactions.js文件中添加所说的导航选项，但它们只是被忽略了。它们生效的唯一方法是在我routes.js的问题中添加它，即在所述文件中没有导航，所以当然，我得到了Can't find variable: navigation错误。

我试图将此行更改为，NavigationActions但如果我这样做.navigate()或.back(). 事实上，我知道这个 navigationOptions 的最佳位置是在我的 Transactions 文件中，但我不知道为什么它在那里不起作用。

因此，您是否可以 a) 帮助我理解为什么它在 Transactions.js 下不起作用，或者 b) 帮助我在我的 routes.js 中为这种情况下的导航工作？

仅供参考，在我的底部，我routes.js的 DrawerNavigation 通过以下方式成功创建：

export default Drawer = createAppContainer(
  createDrawerNavigator({
    Chat:{
      screen: ChatScreens,
    },
    Info:{
      screen: InfoScreens,
    },
    User: {
      screen: UserScreens,
    },
    Feedback: {
      screen: FeedbackScreens,
      navigationOptions: {
        drawerLabel: <Hidden />
      }
    }
  },
  {
    initialRouteName: 'Chat',
    contentComponent: DrawerContent,
    contentOptions: {
      activeTintColor: colors.TURQUOISE,
      itemsContainerStyle: {
        marginVertical: 0,
      },
      iconContainerStyle: {
        opacity: 1
      }
    }
  })
);
4

1 回答 1

0

如果你想navigation在navigationOptions中使用，你需要使用类似的方法navigationOptions = ({ navigation, navigationOptions }) => {}

例如，

class A extends Component {
  static navigationOptions = ({ navigation }) => {
    return {
        headerLeft: (
          <MaterialIcons
            name="chat"
            size={24}
            style={{ color: colors.BLACK, marginLeft: 10 }}
            onPress={() => navigation.popToTop()}
          />
        ),
      }
    };
  };

...

但是你尝试使用navigation未定义。

onPress={() => navigation.popToTop()} // navigation is not defined
于 2019-08-11T06:39:52.887 回答