Question

我的应用程序中有一个标题，需要根据用户是否收到通知来呈现不同的按钮。这是我目前在页面中进行设置的方式：

@import 'node_modules/bootstrap/scss/bootstrap';

问题是，如果static navigationOptions = ({ navigation }) => { return { title: 'My Profile', headerRight: () => ( <Button type="clear" icon={() => <Icon type="material-community" size={25} name={UserProvider.bNotifications ? 'bell' : 'bell-outline'} color={UserProvider.bNotifications ? COLORS.WARNING : COLORS.WHITE} />} onPress={() => navigation.navigate('Notifications', null)} /> ) } };更改值，则除非更改/重新显示页面，否则标题按钮不会更新。

我想切换为使用传递到UserProvider.bNotifications中的navigation属性，但是我不知道如何从导航堆栈外部访问它。 navigationOptions是静态类（不是组件），因此我无法通过常规方式（或使用UserProvider钩子）访问导航道具。

我确实有一个useNavigation类，可以访问该应用程序的NavigationProvider。我用它来触发没有组件的导航。是否可以使用相同的引用在导航属性上设置参数？

NavigationProvider：

NavigationContainer

在我的顶级App组件中，引用设置如下：

import { NavigationActions } from 'react-navigation';

let _navigator;

function getNavigator() {
  return _navigator;
}

function setTopLevelNavigator(navigatorRef) {
  _navigator = navigatorRef;
}

function navigate(routeName, params) {
  _navigator.dispatch(
    NavigationActions.navigate({
      routeName,
      params,
    })
  );
}

function goBack() {
  _navigator.dispatch(
    NavigationActions.back()
  );
}

export default {
  navigate,
  setTopLevelNavigator,
  getNavigator,
  goBack
};

编辑-UserProvider 这只是我的UserProvider类的要点，但应传达其工作原理。

<AppContainer
        ref={navigatorRef => {
          console.log(navigatorRef.props.navigation);
          NavigationProvider.setTopLevelNavigator(navigatorRef);
        }}
      />

Answer 1

如何从外部导航堆栈设置导航参数？

为此，您必须利用getParam道具提供的navigation方法。我将用的方式是将变量设置为等于UserProvider.bNotifications的参数。

static navigationOptions = ({ navigation }) => {
 let notifications = navigation.getParam('notifications')
    return {
      title: 'My Profile',
      headerRight: () => (
        <Button
          type="clear"
          icon={() => <Icon
            type="material-community"
            size={25}
            name={notifications ? 'bell' : 'bell-outline'}
            color={notifications ? COLORS.WARNING : COLORS.WHITE}
          />}
          onPress={() => navigation.navigate('Notifications', null)}
        />
      )
    }
  };

如果需要，可以通过将参数添加为第二个参数来将其设置为初始值navigation.getParam('paramName', 'param initial value')

要更新参数，您需要使用setParams方法。为此，您可以使用 useNavigation 钩子。

您也可以在函数内部而不是元素内进行

// remember to const navigation = useNavigation()

 <Button
    title="Update param"
    onPress={() => navigation.setParams({notifications: 'new value'})}
  />

您也可以通过这种方式初始化值...但是我建议您在navigationOptions内初始化值

我尚未测试代码，但它应该可以工作

RN DOCS ：https://reactnavigation.org/docs/2.x/headers/

如何从外部导航堆栈设置导航参数？

1 个答案: