反应导航无效 - 无错误

时间:2017-10-24 11:05:56

标签: reactjs react-native ecmascript-6 react-navigation

我正在尝试从标签页导航到其他页面。我正在关注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时,我不会在任何地方导航,甚至没有错误。

myOtherPage(预激活)

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

有什么东西我不见了。

0 个答案:

没有答案