Решение проблемы с навигацией с помощью NavigationActions

У меня есть приложение, в котором я пытаюсь применить навигацию в некоторых случаях. Например, А, B, C, D - это мои вкладки, а в вкладкаА у меня есть страницы 3 как 1, 2, 3. Теперь в ситуации, когда я нахожусь на вкладка A и на page 3, есть одна кнопка, в которой я должен вернуться к page 1 на той же самой вкладке (А). Но почему-то моя навигация в этом случае не работает. Ниже мои коды:

SkippedTask.js

 import React from "react";
import {
  View,
  StyleSheet,
  Text,
  AsyncStorage,
  Dimensions,
  Image,
  ScrollView,
  Alert
} from "react-native";
import ButtonC from "../../components/ButtonC";
import { NavigationActions } from "react-navigation";

import Server from "../../provider/Server";

var { width, height } = Dimensions.get("window");

export default class SkippedTask extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      loadingState: false,
      api: new Server(),
      mobile: "",
      arrayLenght: "",
      tasklist: [],
      taskTitle: []
    };
  }

  renderSkippedQues() {
    return (
      <View style = {{ marginTop: 0 }}>
        {this.state.taskTitle.map((item, key) => (
          <View key = {key} style = {{ marginTop: 0 }}>
            <Text style = {{}}>
              <Text style = {{ fontSize: 18, color: "#000" }}>{"\u2022"} </Text>{" "}
              {item}
            </Text>
          </View>
        ))}
      </View>
    );
  }

  handleNav = () => {
    this.props.navigation.dispatch(
      NavigationActions.reset({
        index: 0,
        actions: [NavigationActions.navigate({ routeName: "DashboardTab" })]
      })
    );
  };

  render() {
    if (this.state.arrayLenght <= 0) {
      return <View />;
    } else {
      return (
        <ScrollView>
          <View
            style = {{
              justifyContent: "center",
              alignItems: "center",
              marginTop: height / 40
            }}
          >
            <Text style = {{ fontSize: 16, color: "black", marginTop: 30 }}>
              List of skipped task are :
            </Text>
            {this.renderSkippedQues()}
            <View style = {{ marginTop: 40 }} />
            <ButtonC
              title = "    Click here to complete remaining task   "
              onPress = {this.handleNav}
            />
          </View>
        </ScrollView>
      );
    }
  }
}

Ниже мой файл App.js, в котором я использую StackNavigator из react-navigation.

/**
 * Sample React Native App
 * https://github.com/facebook/react-native
 * @flow
 */
import { AppRegistry } from 'react-native';
import { StackNavigator } from 'react-navigation';

import SessionCheck from './src/screens/SessionCheck';
import LoginScreen from './src/screens/LoginScreen';
import RegisterScreen from './src/screens/RegisterScreen';
import ProfileScreen from './src/screens/ProfileScreen';
import WalletsScreen from './src/screens/WalletsScreen';
import DashboardAccept from './src/screens/DashboardAccept';
import TermsConditionsScreen from './src/screens/TermsConditionsScreen';
import DashboardTabScreen from './src/screens/DashboardTabScreen';
import Person from './src/components/profile/Person';
import Payment from './src/components/profile/Payment';
import List from './src/components/task/List';

const App = StackNavigator({

  // DashboardTab: { screen:DashboardTabScreen },
  Home: { screen: SessionCheck },
  Login: { screen: LoginScreen },
  Register: { screen: RegisterScreen },
  Profile: { screen:ProfileScreen },
  Wallets: { screen:WalletsScreen },
  DashboardAccept: { screen:DashboardAccept },
  TermsConditions: { screen:TermsConditionsScreen },
  DashboardTab: { screen:DashboardTabScreen },
  Person: {screen: Person},
  Payment : {screen: Payment},
  AllTask:{screen: List}
});

export default App;

Теперь мой случай заключается в том, что мне нужно перейти со страницы SkippedTask на экран AllTask, как указано в файле App.js. Но как-то не могу решить эту проблему.

Любые зацепки приветствуются. Спасибо.

Если я прав, у вас есть 3 страницы на вкладке A. Так что вы, возможно, добавили 3 страницы на другую вложенную вкладку внутри вкладки A. Итак, когда вы пытаетесь перейти со страницы 3 на страницу 1., вы можете проверить тег "initialRouteName" и установлен на страницу 1.

omprakash8080 07.05.2018 10:43

Я не понял этого ... не могли бы вы объяснить вкратце ... В настоящее время я использую функцию (handleNav в приведенных выше кодах), в которой я устанавливаю индекс на 0 и вызываю NavigationsActions .... Этот метод работает абсолютно нормально в любом другом месте ... но не в том случае, о котором говорилось выше ... вот почему я мало беспокоюсь.

rohit kumar 07.05.2018 11:04

Какую ошибку вы получаете? Также из вашего кода вы используете react-navigation, а не react-native-navigation

Pritish Vaidya 07.05.2018 11:05

Верно .... моя ошибка ..... Я не получаю никаких ошибок, дважды проверил консоль ... Когда я пытаюсь нажать кнопку на экране, ничего не происходит. Это все

rohit kumar 07.05.2018 11:24

Еще одна вещь - зарегистрировать this.props.navigation в вашем SkippedTask.js, возвращает ли он действительный объект?, Поскольку маршрут не был определен в вашем StackNavigator.

Pritish Vaidya 07.05.2018 11:27

маршрут был определен в моем StackNavigtor, и он не возвращает никаких объектов, ни на других вкладках, где он работает идеально ........

rohit kumar 07.05.2018 11:40

@PritishVaidya, не могли бы вы взглянуть на мой код через программу просмотра команд .... потому что я все еще не могу решить эту проблему ...

rohit kumar 08.05.2018 16:13
Умерло ли Create-React-App?
Умерло ли Create-React-App?
В этом документальном фильме React.dev мы исследуем, мертв ли Create React App (CRA) и какое будущее ждет этот популярный фреймворк React.
Освоение React Native: Пошаговое руководство для начинающих
Освоение React Native: Пошаговое руководство для начинающих
React Native - это популярный фреймворк с открытым исходным кодом, используемый для разработки мобильных приложений. Он был разработан компанией...
В чем разница между react native и react ?
В чем разница между react native и react ?
React и React Native - два популярных фреймворка для создания пользовательских интерфейсов, но они предназначены для разных платформ. React - это...
От React к React Native: Руководство для начинающих по разработке мобильных приложений с использованием React
От React к React Native: Руководство для начинающих по разработке мобильных приложений с использованием React
Если вы уже умеете работать с React, создание мобильных приложений для iOS и Android - это новое приключение, в котором вы сможете применить свои...
Хуки React: что это такое и как их использовать
Хуки React: что это такое и как их использовать
Хуки React - это мощная функция библиотеки React, которая позволяет разработчикам использовать состояние и другие возможности React без написания...
0
7
282
0

Другие вопросы по теме