Question

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

到目前为止，在屏幕提示模板中从一个屏幕导航到另一个屏幕所需的基本知识：

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

Answer 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>

Answer 2

我现在的目标是要有一个列出标题和组件的组件列表。描述。通过单击组件，屏幕应该是更改为组件的详细视图。因此，我尝试实施对于我的组件也一样：

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

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

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

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

Answer 3

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

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

然后是MyShowView，获取数据如下：

this.navigation.getParam("myData");

在任何需要的地方。

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

Answer 4

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

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

使用vue-native-router

4 个答案: