Question

这是我的 App.js 。它由2个屏幕组成，其中一个屏幕包含一个名为AddIcon的图标组件

const Stack = createStackNavigator(
  {
    Home: {
      screen: HomeScreen,
      navigationOptions: () => ({
        title: `Home`,
        headerTitleStyle: {
          color: '#56607b',
          fontSize: 18,
          fontWeight: '500',
        },
        headerRight: <AddIcon />
      })
    },
    Add: {
      screen: AddScreen,
      navigationOptions: () => ({
        title: `Add`,
        headerTitleStyle: {
          color: '#56607b',
          fontSize: 18,
          fontWeight: '500'
        }
      })
    },
  },
);

这里是 AddIcon.js

const AddIcon = (props) => {
    return (
        <Icon
            name="ios-add-circle"
            onPress={() => this.props.navigation.navigate('Add')}
        />
    );
}

我正在尝试使其在按下图标时应导航到堆栈（AddScreen.js）中的第二个屏幕。我现在收到的错误是“无法读取未定义的属性'导航'”。我认为这是因为 AddScreen.js 是带有导航道具的，而不是 AddIcon.js 。问题是，如何使图标也具有道具？

Answer 1

您可以单独创建NavigationService

import { NavigationActions } from 'react-navigation';

const navigator;

function setTopLevelNavigator(navigatorRef) {
  navigator = navigatorRef;
}

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


export default {
  navigate,
  setTopLevelNavigator,
};

然后在您的App.js中将引用道具添加到父StackNavigator：

<RootNavigator
        ref={navigatorRef => {
          NavigationService.setTopLevelNavigator(navigatorRef);
        }}
/>

以及以下您必须更新的代码：

import NavigationService from 'path-to-NavigationService.js';

<Icon
 name="ios-add-circle"
 onPress={() => NavigationService.navigate('Add')}
 />

您可以参考官方文档here

希望这会对您有所帮助。

如何使用堆栈导航器将道具从屏幕传递到组件

1 个答案: