Question

我有一个应用程序，我试图在某些情况下应用导航。例如， A ， B ， C ， D 是我的标签标签 A ，我有3个网页1，2，3。现在，我处于标签A 和page 3上，有一个按钮，我必须在同一标签本身上导航回page 1 （A）即可。但不知何故，我的导航在这种情况下不起作用。以下是我的代码：

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>
      );
    }
  }
}

以下是我使用StackNavigator react-navigation的 App.js 文件。

/**
 * 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;

现在我的情况是，我需要从 App.js 文件中提到的 SkippedTask 页面导航到 AllTask 屏幕。但不知怎的，我无法解决这个问题。

任何线索都表示赞赏。感谢。

使用NavigationActions进行反应导航问题

0 个答案: