从选项卡导航不起作用 React-native

Question

我正在尝试从标签页导航到其他页面。我正在关注 tabnavigator 和 stacknavigator。

myTabsHost(RegisterHostPage) 这里我托管了两个标签

   import React, { Component } from "react";
import {
  AppRegistry,
  Text,
  View,
  Image,
  StyleSheet,
  TouchableOpacity
} from "react-native";
import { TabNavigator } from "react-navigation";
import { Tab } from "../../config/router.js";
import {Tab2} from "../../config/router.js";
import { NavigationActions } from "react-navigation";
class RegisterHost extends Component {
  render() {
    return (
      <View style={Styles.container}>
        <Text style={Styles.boldLabel}> User Register</Text>
        <Text style={Styles.normalLabel}>Wallet account registration</Text>
        <TouchableOpacity
          onPress={() => {
            const navigateAction = NavigationActions.navigate({
              key: null,
              routeName: "preactivate",
              params: {}
            });
            this.props.navigation.dispatch(navigateAction);
          }}
        >
          <Text>topreactivate</Text>
        </TouchableOpacity>
        <Tab2 />
      </View>
    );
  }
}

const Styles = StyleSheet.create({
  container: {
    flex: 1,
    padding: 2,
    justifyContent: "center",

    backgroundColor: "#FFFFFF"
  },
  boldLabel: {
    fontWeight: "bold",
    fontSize: 24,
    alignSelf: "center",
    color: "#08AE9E",
    marginBottom: 20,
    marginTop: 10
  },
  normalLabel: {
    fontWeight: "normal",
    fontSize: 18,
    alignSelf: "center",
    color: "black",
    marginBottom: 20,
    marginTop: 10
  }
});
export default RegisterHost;

myTabPage (BankCustomerRegister)

 import React, { Component } from "react";
import {
  Text,
  View,
  Image,
  StyleSheet,
  TextInput,
  TouchableOpacity
} from "react-native";
import { TabNavigator } from "react-navigation";
import{StackNavigator}  from 'react-navigation';
import FetchData from "../../utils/fetch.js";
class BankCustomerRegister extends Component {

  constructor(props) {
    super(props);
    this.state = {
      stCustId: "",
      stIdcard: "",
      stPhoneNum: "",
      isMounted: false
    };
  }

    }
  };
  render() {
    const { navigate } = this.props.navigation;
    return (
      <View style={styles.container}>
        <Image source={require("../../resources/icons/bank.png")} />

        <TextInput
          style={styles.textInput}
          onChangeText={this._handleCustId}
          placeholderTextColor="black"
          placeholder="Customer ID"
        />
        <TextInput
          style={styles.textInput}
          placeholderTextColor="black"
          onChangeText={this._handleIdCard}
          placeholder="ID card"
        />

        <TextInput
          style={styles.textInput}
          placeholderTextColor="black"
          onChangeText={this._handlePhoneNum}
          placeholder="Phone No"
        />

        <TouchableOpacity
         onPress={() => {
        // NOTICE HERE

        const navigateAction = NavigationActions.navigate({
          routeName: "preactivate",
          params: {},
        });
        this.props.navigation.dispatch(navigateAction);
      }}
          style={styles.touchable}
        >
          <Text style={styles.btnlabel}>Register</Text>
        </TouchableOpacity>
      </View>
    );
  }
}



export default BankCustomerRegister;

当我点击 touchable.its 应该导航到 otherPage 时，我没有导航到任何地方，甚至没有错误。

我的其他页面（预激活）

    import React, { Component } from "react";
import {
  View,
  Text,
  StyleSheet
} from "react-native";

class PreUserActivation extends Component {
  // Render callBack
  render() {
    return (
      <View style={styles.container}>
        <Text>Screen</Text>
      </View>
    );
  }
}

export default PreUserActivation;

我在 router.js 中的路由器配置

   //tab Router
export const Tab = TabNavigator(
  {
    BankCustomerRegister: {
      screen: BankCustomerRegister,
      navigationOptions: {
        tabBarLabel: "Bank Customer"
      }
    },
    nonbankcustomer: {
      screen: NonCustomerRegister,
      navigationOptions: {
        tabBarLabel: "New Customer"
      }
    }
  },
  {
    tabBarPosition: "top",
    animationEnabled: true,

    tabBarOptions: {
      // activeTintColor: "#e91e63",
      labelStyle: {
        fontSize: 16
      },
      style: {
        backgroundColor: "#08AE9E"
      },
      tabStyle: { width: 200 } //Set width to make INLINE TABS
    }
  }
);

export const Root = StackNavigator({

  board: {
    screen: OnBoardScreen,
    navigationOptions: {
      header: null
    }
  },
  preactivate: {
    screen: PreUserActivation,
    navigationOptions: {
      header: null
    }
  },

  Tabs: {
    screen: Tab
  }
});

我有什么遗漏的吗？

Answer 1

你有这个结构，

[1]Root(Stack Navigator)
    --board [First Navigator]
    --preactivate [First Navigator]
    --[2]Tabs(Tab Navigator)
        --BankCustomerRegister[Second Navigator]
        --nonbankcustomer[Second Navigator]

并且您正尝试从 SecondNavigator (BankCustomerRegister) 导航到 FirstNavigator（预激活）

第二个导航器在该堆栈上没有该路由（预激活）。

您需要使用 NavigationActions。

import React, { Component } from "react";
import {
  Text,
  View,
  Image,
  StyleSheet,
  TextInput,
  TouchableOpacity
} from "react-native";
import {
  TabNavigator,
  StackNavigator,
  NavigationActions
} from "react-navigation";
import FetchData from "../../utils/fetch.js";
class BankCustomerRegister extends Component {
  constructor(props) {
    super(props);
    this.state = {
      stCustId: "",
      stIdcard: "",
      stPhoneNum: "",
      isMounted: false
    };
  }

  render() {
    return (
      <View style={styles.container}>
        <Image source={require("../../resources/icons/bank.png")} />
        <TextInput
          style={styles.textInput}
          onChangeText={this._handleCustId}
          placeholderTextColor="black"
          placeholder="Customer ID"
        />
        <TextInput
          style={styles.textInput}
          placeholderTextColor="black"
          onChangeText={this._handleIdCard}
          placeholder="ID card"
        />
        <TextInput
          style={styles.textInput}
          placeholderTextColor="black"
          onChangeText={this._handlePhoneNum}
          placeholder="Phone No"
        />
        <TouchableOpacity
          onPress={() => {
            // NOTICE HERE
            const navigateAction = NavigationActions.navigate({
              routeName: "preactivate"
            });
            this.props.navigation.dispatch(navigateAction);
          }}
          style={styles.touchable}
        >
          <Text style={styles.btnlabel}>Register</Text>
        </TouchableOpacity>
      </View>
    );
  }
}

export default BankCustomerRegister;