当前位置: 首页 > 面试题库 >

React Native-导航问题“未定义不是对象(this.props.navigation.navigate)”

漆雕唯
2023-03-14
问题内容

我按照本教程https://reactnavigation.org/docs/intro/的操作
,遇到了一些问题。

我每次都使用Expo Client应用程序而不是模拟器/模拟器来渲染我的应用程序。

我的代码如下所示。

我最初在“ ChatScreen”组件上方定义了“ SimpleApp” const,但这给了我以下错误:

路线“聊天”应声明一个屏幕。例如:…等

因此我将SimpleApp的权限移至“ AppRegistry”上方,这标志着一个新错误

元素类型无效:预期的字符串.....您可能忘记了导出组件..etc

本教程没有向任何组件添加关键字“导出默认值”,我认为这可能与im在Expo应用程序上运行它有关。所以我在“ HomeScreen”中添加了“ export
default”,错误消失了。

我似乎无法摆脱的新错误(基于下面的代码)如下:

未定义不是对象(评估“ this.props.navigation.navigate”)

除非删除“ const {navigate}”周围的“ {}”,否则我无法摆脱它,但是当我从主屏幕上按按钮时,这将破坏导航

import React from 'react';
import {AppRegistry,Text,Button} from 'react-native';
import { StackNavigator } from 'react-navigation';

export default class HomeScreen extends React.Component {
  static navigationOptions = {
    title: 'Welcome',
  };
  render() {
    const { navigate } = this.props.navigation;
    return (
      <View>
        <Text>Hello, Chat App!</Text>
        <Button
          onPress={() => navigate('Chat')}
          title="Chat with Lucy"
        />
      </View>
    );
  }
}



class ChatScreen extends React.Component {
  static navigationOptions = {
    title: 'Chat with Lucy',
  };
  render() {
    return (
      <View>
        <Text>Chat with Lucy</Text>
      </View>
    );
  }
}

const SimpleApp = StackNavigator({
  Home: { screen: HomeScreen },
  Chat: { screen: ChatScreen },
});
AppRegistry.registerComponent('SimpleApp', () => SimpleApp);

问题答案:

使用Expo时,您不应该自己注册应用程序,而应该让Expo自己进行注册,请记住,您必须始终导出默认组件:此外,您还需要从react-
native导入View和Button:请在下面找到完整内容码:

import React from 'react';
import {
  AppRegistry,
  Text,
  View,
  Button
} from 'react-native';
import { StackNavigator } from 'react-navigation';

 class HomeScreen extends React.Component {
  static navigationOptions = {
    title: 'Welcome',
  };
  render() {
    const { navigate } = this.props.navigation;
    return (
      <View>
        <Text>Hello, Chat App!</Text>
        <Button
          onPress={() => navigate('Chat', { user: 'Lucy' })}
          title="Chat with Lucy"
        />
      </View>
    );
  }
}

 class ChatScreen extends React.Component {
  // Nav options can be defined as a function of the screen's props:
  static navigationOptions = ({ navigation }) => ({
    title: `Chat with ${navigation.state.params.user}`,
  });
  render() {
    // The screen's current route is passed in to `props.navigation.state`:
    const { params } = this.props.navigation.state;
    return (
      <View>
        <Text>Chat with {params.user}</Text>
      </View>
    );
  }
}

const  SimpleAppNavigator = StackNavigator({
  Home: { screen: HomeScreen },
  Chat: { screen: ChatScreen }
});

const AppNavigation = () => (
  <SimpleAppNavigator  />
);

export default class App extends React.Component {
  render() {
    return (
        <AppNavigation/>
    );
  }
}


 类似资料:
  • 问题内容: 无法完成这项工作,交叉检查了所有引用,但这没有帮助。这是该视图的所有代码。 我不确定我缺少什么,是否需要所有依赖项。 问题答案: 如果您以这种方式调用ListView组件,则它应该可以工作。NavigatorIOS已经向下传递参考(但仅一代/一代)。 但是,如果要从NavigatorIOS引用的组件的子组件中调用ListView组件,请尝试此操作。从NavigatorIOS引用的组件中

  • 问题内容: 我正在尝试使用React Navigation和StackNavigator在我的应用程序中导航。 我有一个带有的按钮,我希望它将带我到,但出现以下错误: E ReactNativeJS:未定义不是对象(评估“ this.props.navigation.navigate”) 我需要添加什么才能使它正常工作? 在这里查看我的代码:https : //gist.github.com/ch

  • 我正在尝试重建一个使用Firebase云函数和Firestore的web应用程序示例。部署函数时,出现以下错误: 这是功能: 我只是尝试部署函数来测试它。并且已经在网上搜索过类似的问题,但是找不到任何其他与我的问题相匹配的帖子。

  • 实际上,我正在我的应用程序中使用新的架构组件,并且我已经设置了导航组件。我有一个导航抽屉,我想用它。我已经设置好了,但我面临一些问题: 1-抽屉不会自动关闭。菜单正常工作并导航到正确的位置,但导航后不会关闭。我必须添加一个目的地ChangedListener才能自己关闭它。 在代码实验室里,抽屉自动关闭,我真的不明白为什么。 2-向上按钮打开抽屉。当我导航到非顶级片段时,菜单图标变为向上箭头,但当

  • 我有问题使我的导航栏坚持到页面的右手边(同时仍然在1040px容器)。我希望导航栏是在同一行的标题'Ejharris tutoring'但在右边 代码如下: 样式表: HTML:

  • 修改聊天页面导航栏背景色、导航栏上增加自定义按钮、修改导航栏上图标按钮颜色等 /** 聊天窗口导航栏 @param navigationBar 导航栏 */ - (void)ntalker_navigationBar:(UIView *)navigationBar { navigationBar.backgroundColor = [UIColor redColor];//修改导航栏背景色 }