Question

navigation.navigate 不是一个函数

2018-10-20

42538

react-native react-navigation-stack

我正在使用导航来导航我的 React Native 应用程序，但我无法解决这个问题。我按照文档做了，但对我没有任何作用。

问题是我试图使用导航选项添加标题和右按钮来导航到另一个屏幕，但它一直给我这个错误：“navigation.navigate 不是一个函数。（在 navigation.navigate 中未定义）

这是我的代码：

    static navigationOptions = (navigation) => {
        return {
            title: 'Review Jobs',
            headerRight: (<Title onPress={()=>{navigation.navigate('settings')}}>Settings</Title>)
        };
    };

谢谢

Answer 1

这是 React 的一个常见问题，特别是当你不了解最新的 JS 标准（如 React 使用的 ES6）时。

所以，你的问题是概念上的。React 组件接收一个名为 props 的对象，其中包含所有 props 。通常，你使用解构形式直接获取 props 的某些属性。在这种情况下，你想要 props.navigation 。

你可以在箭头函数参数中解构 props 对象，这就是文档所说的，使用 ({navigation}) => ... 而不是 (navigation) => ...

这与使用 (props) => ... 并稍后执行 props.navigation 相同>

你还需要更改 onPress 函数。在箭头函数中使用 {...} 块不会返回任何内容，除非您指定 return 。如果您没有使用 {...} 包裹主体函数，则与编写 { return ...} 相同。因此，如果您想返回 navigation.navigate('settings') ，则必须删除周围的 {...} 或在里面写入 return。

    static navigationOptions = ({navigation}) => {
        return {
            title: 'Review Jobs',
            headerRight: (<Title onPress={()=> navigation.navigate('settings')}>Settings</Title>)
        };
    };

此外，您可以对 navigationOptions 函数执行相同操作：

    static navigationOptions = ({navigation}) => ({
        title: 'Review Jobs',
        headerRight: (<Title onPress={() => navigation.navigate('settings')}> Settings </Title>),
    });

Answer 2

接收参数时使用对象解构：

static navigationOptions = ({ navigation }) => { // use {} to object destructuring
  return {
   title: 'Review Jobs',
   headerRight: (
      <Title onPress={()=> navigation.navigate('settings')}>
       Settings
      </Title>
   )
   };
};

Answer 3

您缺少用于导航的 {

static navigationOptions = ( {navigation} ) => {
  return {
    title: 'Review Jobs',
    headerRight: (<Title onPress={() => { navigation.navigate('settings') }}>Settings</Title>)
  };
};