Навигация внутри vue-компонента с помощью vue-native-router - PullRequest
Новая
       24

Навигация внутри vue-компонента с помощью vue-native-router

0 голосов
/ 03 мая 2019

Документы 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"
},

Ответы [ 2 ]

0 голосов
/ 03 мая 2019

Моя цель сейчас - получить список компонентов, которые отображают заголовок и описание.При нажатии на компонент экран должен быть изменен на подробный вид компонента.Таким образом, я попытался реализовать то же самое для моего компонента:

Почему вы не можете сделать что-то подобное? 

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

, используя navigationOptions, чтобы добавить заголовок и описание кВ вашем списке компонентов маршрутизации у вас будут доступны эти данные для отображения.

каждый компонент маршрутизатора будет по-прежнему отображать представление или экран, связанный с этой ссылкой.

0 голосов
/ 03 мая 2019

Ты сделал эту часть?или что-то подобное .. 

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