26

我正在关注本教程https://reactnavigation.org/docs/intro/ 并且遇到了一些问题。

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

我的代码如下所示。

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

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

所以我将 SimpleApp 的声明移到“AppRegistry”上方,并标记了一个新错误

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

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

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

undefined 不是对象(评估“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);
4

6 回答 6

33

Additional Info: When you are nesting child components, you need to pass navigation as prop in parent component. //parent.js <childcomponent navigation={this.props.navigation}/>

And you can access navigation like this

//child.js

enter image description here this.props.navigation.navigate('yourcomponent');

Reference: https://reactnavigation.org/docs/en/connecting-navigation-prop.html

于 2019-02-17T04:46:49.067 回答
31

使用 Expo,您不应该自己进行 App 注册,而是应该让 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/>
    );
  }
}
于 2017-06-21T15:39:12.423 回答
4

正如 Bobur 在他的回答中所说,导航道具不会传递给路由组件的子组件。为了让您的组件可以访问,navigation您可以将其作为道具传递给它们,但是有更好的方法。

如果您不想将navigationprop 一直向下传递到组件层次结构,则可以useNavigation改用。(在我看来,这无论如何都更干净,并且减少了我们必须编写的代码量):

function MyBackButton() {
  const navigation = useNavigation();

  return (
    <Button
      title="Back"
      onPress={() => {
        navigation.goBack();
      }}
    />
  );
}

https://reactnavigation.org/docs/use-navigation/

这真的很好,因为如果您有多个级别的组件,您将不必连续传递导航对象作为道具来使用它。只传递navigation一次需要我们 1. 向我们想要传递它的组件添加一个 prop。2.从父组件传递prop。3.使用navigation道具导航。有时我们必须重复第 1 步和第 2 步才能将 prop 一直传递到需要使用的组件navigation。我们可以使用此方法将步骤 1 和 2(无论它们重复多少次)压缩为一个useNavigation调用。

我认为这是最好的。

于 2021-03-28T15:33:46.390 回答
0

试试这个代码:onPress={() => this.props.navigation.navigate('Chat')}

于 2021-02-02T06:11:26.137 回答
0

<ChildComponent导航={props.navigation} {...data} />

这将使导航从父导航传播到后续子导航。

于 2021-05-04T14:38:58.267 回答
-7
const AppNavigation =()=>{  <SimpleApp  />}

export default class App extends React.Componet{
   render(){
      return (
        <AppNavigation/>
     );
  }
}
于 2017-07-10T11:48:01.450 回答