0

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是undefined在 vue 组件内部。不知何故，我不明白这里的联系，也找不到任何相关的东西来解释这一点。我也不确定这是否是正确的方法，或者导航是否应该发生在组件之外。

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

依赖项：

"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"
},
4

4 回答 4

1

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

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

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

this.navigation.getParam("myData");

无论您需要哪里。

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

于 2019-12-12T21:18:13.457 回答
0

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

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

于 2020-01-11T07:10:05.437 回答
0

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

<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>
于 2019-05-03T13:32:36.127 回答
0

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

为什么你不能做这样的事情？

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

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

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

于 2019-05-03T14:28:04.930 回答