使用 vue-native-router 在 vue 组件内导航答案

【问题标题】：Navigation inside vue component with vue-native-router使用 vue-native-router 在 vue 组件内导航
【发布时间】：2019-09-22 01:14:51
【问题描述】：

vue-native-router 文档提供了一个很好的示例，说明如何实现导航以在屏幕之间切换，到目前为止，它在我正在尝试构建的小演示应用程序中有效，以了解事情的工作原理。

到目前为止，在屏幕 vue 模板中从一个屏幕导航到另一个屏幕所需的基础知识如下：

<template>
    <view class="o-container">
        <button title="ChangeView" :on-press="goToMyNewFancyView" />
    </view>
</template>

<script>
export default {
    props: {
        navigation: {
            type: Object
        }
    },
    methods: {
        goToMyNewFancyView() {
            this.navigation.navigate('MyNewFancyView');
        }
    }
};
</script>

（我已经跳过了StackNavigator 的主要设置，因为这与文档中的完全一样，并且对这个问题没有真正的帮助，请参阅 TJ Weems 的回答）。

我现在的目标是创建一个显示标题和描述的组件列表。通过单击组件，屏幕应更改为组件的详细视图。因此，我尝试为我的组件实现相同的功能：

<template>
    <view>
        <text>This is a component.</text>

        <button title="show more" :on-press="show" />
    </view>
</template>

<script>
export default {
    props: {
        navigation: {
            type: Object
        }
    },
    methods: {
        show() {
            this.navigation.navigate('MyShowView');
        }
    }
};

但是，this.navigation 在 vue 组件中是 undefined。不知何故，我不明白这里的联系，也找不到任何相关的东西来解释这一点。我也不确定这是否是正确的方式，或者导航是否应该发生在组件之外。

如何实现从作为事物预告片的组件到实际详细信息屏幕的链接？

依赖关系：

"dependencies": {
  "expo": "^32.0.0",
  "react": "16.5.0",
  "react-native": "https://github.com/expo/react-native/archive/sdk-32.0.0.tar.gz"
},
"devDependencies": {
  "@babel/core": "^7.0.0-0",
  "babel-preset-expo": "^5.0.0",
  "vue-native-core": "0.0.8",
  "vue-native-helper": "0.0.10",
  "vue-native-router": "0.0.1-alpha.3",
  "vue-native-scripts": "0.0.14"
},

【问题讨论】：

标签： vue.js vue-native

【解决方案1】：

这部分是你做的吗？或类似的东西..

<script>
import { StackNavigator } from "vue-native-router";
import HomeScreen from "../src/screens/homeScreen.vue";
import DetailsScreen from "../src/screens/detailsScreen.vue";
const AppNavigation = StackNavigator(
  {
    Home: HomeScreen,
    Details: DetailsScreen,
  },
  {
    initialRouteName: 'Home',
  }
);
export default {
    components: { AppNavigation }
}
</script>

组件实例

<template>
  <app-navigation></app-navigation>
</template>

【讨论】：

是的，这就是我所描述的省略的部分。从一个屏幕视图导航到另一个屏幕视图是可行的，它只是在组件内不起作用。

【解决方案2】：

我现在的目标是拥有一个显示标题和描述。通过单击组件，屏幕应该是更改为组件的详细视图。因此，我试图实现我的组件也一样：

你为什么不能这样做？

StackNavigator({
  Home: HomeScreen,
  Detail: {
      screen: DetailScreen,
      navigationOptions: {
        title: 'Detail Screen',
        headerStyle: {
          backgroundColor: 'transparent',
        },
      },
    },
})

使用navigationOptions 将标题和描述添加到路由组件列表中，您可以显示这些数据。

每个路由器组件仍会呈现与该链接关联的视图或屏幕。

【讨论】：

这不是我的问题的答案。我的问题是“我怎样才能在我的组件中获得this.navigation 部分，即undefined，以便能够在我的组件中导航。我不是在问如何更新屏幕的标题。

【解决方案3】：

要获取参数，您可以使用导航选项。首先添加一些数据：

methods: {
        show() {
            this.navigation.navigate('MyShowView', { myData : 'Hi' });
        }
    }

然后你的MyShowView，获取数据如下：

this.navigation.getParam("myData");

随时随地。

在 React Navigation 和 vue-native-router 文档中找到这个

【讨论】：

【解决方案4】：

为我找到了一个修复程序。尝试将按钮更改为

<button title="show more" :on-press="show" :navigation="this.props.navigation" />

【讨论】：