Navigieren von Tabs funktioniert nicht React-native

Question

Ich versuche, von Tab-Seite zu anderer Seite zu navigieren. Ich folge Tabnavigator und Stacknavigator.

myTabsHost (RegisterHostPage) Hier bin ich Hosting zwei Registerkarten

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; 

, wenn ich angeblich klicken touchable.its zu Other navigieren, i'ts nicht navigieren überall, auch keine Fehler.

myOtherPage (voraktivieren)

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; 

Mein Router config in 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 
    } 
}); 

Gibt es etwas, was ich vermisst habe.

Answer 1

Sie haben diese Struktur,

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

und Sie versuchen, aus SecondNavigator (BankCustomerRegister) zu FirstNavigator navigieren (voraktivieren)

zweiten Navigator nicht hat diese Route (preactivate) auf diesem Stapel.

Sie müssen NavigationActions verwenden.

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;