从不起作用的选项卡导航 反应原生.

Question

我正在尝试从标签页导航到其他页面。我正在关注选项卡导航器和堆栈导航器。

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;

当我单击可触摸时，它应该导航到其他页面，我没有导航到任何地方，甚至没有错误。

我的其他页面（预激活）

    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;

我的路由器配置在路由器中.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（预激活）

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

您需要使用导航操作。

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;