首页 文章

React Native - 导航问题“undefined不是对象（this.props.navigation.navigate）”

提问于
浏览 次
8

我遵循本教程https://reactnavigation.org/docs/intro/并遇到了一些问题 .

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

我的代码在下面看到 .

我最初在“ChatScreen”组件上面定义了“SimpleApp”const但是这给了我以下错误：

路线'聊天'应该声明一个屏幕 . 例如：......等

所以我将SimpleApp的decleration移到了“AppRegistry”之上，并标记了一个新的错误

元素类型无效：期望字符串.....您可能忘记导出组件..等等

本教程没有将关键词“export default”添加到任何组件中，我认为它可能与我在Expo应用程序上运行它的事实有关吗？所以我将“export default”添加到“HomeScreen”，错误就消失了 .

我似乎无法摆脱的新错误（基于下面的代码）如下：

undefined不是对象（评估'this.props.navigation.navigate'）

除非我删除“const ”周围的“{}”，否则我无法摆脱它，但当我从主屏幕按下按钮时会破坏导航

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);
javascript reactjs react-native expo

2 回答

  • -2

    有了世博会，你不应该让自己的应用注册，你应该让世博会这样做，记住你必须始终导出默认组件：你还需要从反应本机导入视图和按钮：请在下面找到完整的码：

    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/>
    );
  }
}
    回复于
  • 14
    const AppNavigation =()=>{  <SimpleApp  />}

export default class App extends React.Componet{
   render(){
      return (
        <AppNavigation/>
     );
  }
}
    回复于

相关问题